Html 水平导航栏，搜索输入未对齐_Html_Css

Html 水平导航栏，搜索输入未对齐

html css

Html 水平导航栏，搜索输入未对齐,html,css,Html,Css,我试图创建一个水平导航栏，输入类型为“搜索” 它工作得很好，但并没有正确地和其他的对齐，只使用CSS，而不是引导以下是我目前掌握的情况： .nav{ 宽度：100%；浮动：左；显示：内联块；保证金：0.03亿元；填充：0；文本对齐：居中；对齐内容：右对齐； } .导航a{ 显示：块；填充：18px 10px；文字装饰：无；颜色：#020303；字体系列：“投石机MS”；浮动：左；列表样式：无； } .导航a:悬停{ 颜色：#BF250D； } #家{ 颜色：#DE94

我试图创建一个水平导航栏，输入类型为“搜索”

它工作得很好，但并没有正确地和其他的对齐，只使用CSS，而不是引导

以下是我目前掌握的情况：

.nav{
宽度：100%；
浮动：左；
显示：内联块；
保证金：0.03亿元；
填充：0；
文本对齐：居中；
对齐内容：右对齐；
}
.导航a{
显示：块；
填充：18px 10px；
文字装饰：无；
颜色：#020303；
字体系列：“投石机MS”；
浮动：左；
列表样式：无；
}
.导航a:悬停{
颜色：#BF250D；
}
#家{
颜色：#DE940B；
}

有几件事

您的搜索输入缺少一个等于，应该是

input type=“search”

您应该清除浮动（添加了

ul:after

css声明）

这里是解决方案1，它通过使用填充使搜索与导航项的大小相同，并向右浮动。为了保持一致性，我会使用这个：

这是一个解决方案2，其中有利润

您还可以查看其他垂直居中选项：

只需在输入中添加一个边距，就像您为

所做的那样：

.nav{
宽度：100%；
浮动：左；
显示：内联块；
保证金：0.03亿元；
填充：0；
文本对齐：居中；
对齐内容：右对齐；
}
.导航a{
显示：块；
填充：18px 10px；
文字装饰：无；
颜色：#020303；
字体系列：“投石机MS”；
浮动：左；
列表样式：无；
}
.导航输入{
利润率：18px 10px；
}
.导航a:悬停{
颜色：#BF250D；
}
#家{
颜色：#DE940B；
}

这里有一个使用

flexbox

或

flex

HTML

请注意，我已将搜索移到

ul

块之外

<html>
<head>
  <title>Good Stuff-If it's good its here</title>

  <link rel="icon" href="images/favicon-32x32.png" type="image/x-icon"/>
  <link rel="stylesheet" type="text/css" href="css/home.css">
  <script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
</head>
<body>


<nav>
<div class="nav">
  <ul class="container">

  <a id="home" href="#" !important >Home</a>
  <a href="#">Recipes</a>
  <a href="#">Our Products</a>
  <a href="#">Portugal</a>
  <a href="#">Blog</a>
  <a href="#">Ingredients</a>
  <a href="#">Good Stuff</a>  
  </ul>
  <input type"search" placeholder="Search this Site">
</div>
</nav>  


</body>
</html>

代码笔在这里：

.nav{
  width: 100%;
  display: flex; # Change to flex
  margin: 0 0 3em 0;
  padding: 0;
  text-align: center;
  align-content: right;
  justify-content: space-between;
  align_items: center;
  align-content; center 

}


.nav a{
  flex: 1;
  padding: 18px 10px;
  text-decoration: none;
  color: #020303;
  font-family: "Trebuchet MS";
  list-style: none;



}

.nav a:hover {
  color:#BF250D;
}

#home {
  color:#DE940B; 
}