Question

我正在尝试创建一个水平导航栏，其输入类型为＆＃34;搜索＆＃34;。

它运行良好，但它与其他人没有正确对齐，只使用CSS，而不是Bootstrap。

到目前为止我所拥有的内容：https://codepen.io/mugas/pen/gvVwJj

＆＃13;

.nav{
	width: 100%;
	float: left;
	display: inline-block;
	margin: 0 0 3em 0;
	padding: 0;
	text-align: center;
	align-content: right;
}



.nav a{
	display: block;
	padding: 18px 10px;
	text-decoration: none;
	color: #020303;
	font-family: "Trebuchet MS";
	float: left;
	list-style: none;
}

.nav a:hover {
	color:#BF250D;
}

#home {
	color:#DE940B; 
}

＆＃13;

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

＆＃13;

Answer 1

有几件事，

您的搜索输入缺少等号，应为input type="search"

您应该清除浮动（添加ul:after css声明）

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

https://codepen.io/xhynk/pen/PQMbwx

这是带有边距的解决方案2.

https://codepen.io/xhynk/pen/BYXQjb

您还可以查看其他垂直居中选项：https://css-tricks.com/centering-css-complete-guide/

Answer 2

只需添加一个保证金，就像你为a所做的那样：

.nav {
  width: 100%;
  float: left;
  display: inline-block;
  margin: 0 0 3em 0;
  padding: 0;
  text-align: center;
  align-content: right;
}

.nav a {
  display: block;
  padding: 18px 10px;
  text-decoration: none;
  color: #020303;
  font-family: "Trebuchet MS";
  float: left;
  list-style: none;
}

.nav input {
  margin: 18px 10px;
}

.nav a:hover {
  color: #BF250D;
}

#home {
  color: #DE940B;
}

<nav>
  <div class="nav">
    <ul class="container">
      <input type="search" placeholder="Search this Site">
      <a id="home" href="#">Home</a>
      <a href="#">Recipes</a>
      <a href="#">Our Products</a>
      <a href="#">Portugal</a>
      <a href="#">Blog</a>
    </ul>
  </div>
</nav>

Answer 3

以下是使用flexbox或flex

的解决方案

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

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>

对于css，我已将display更改为flex并将参数设置为

justify-content: space-between;这意味着它会先将ul发送到左侧，然后将search发送到右侧，并将空格留空。

align_items: center;和align-content; center表示它会很好地对齐，只需将flex:1添加到a代码就会告诉它应用属性..

.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; 
}

CODEPEN在这里：

https://codepen.io/anon/pen/VQomMB

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

3 个答案: