导航

Question

我试图在我的导航栏中垂直对齐我的搜索栏，并尝试使用vertical-align：middle;但它没有改变任何东西，我还需要知道如何改变搜索栏的大小，谢谢:) 顺便说一句，它在图片中非常亮，但导航结束于搜索栏正上方，其浅灰色

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color:#eee;
}

li {
    float: left;
}

li a {
    display:block;
    color:black;
    padding:14px 16px;
    text-decoration:none;
}

li a:hover:not(#active) {
    background-color:#ddd;
}

#active {
    background-color:#ccc;
}
li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

footer{
	text-align:center;
}

#navform{
	vertical-align:middle;
}

<nav>
			<ul>
				<li><a id="active" href="index.html">Home</a></li>
				<li><a href="albums.html">Albums</a></li>
				<li class="dropdown">
				<a href="javascript:void(0)" class="dropbtn">Artists</a>
				<div class="dropdown-content">
				<a href="ts">Taylor Swift</a>
				<a href="bm">Bruno Mars</a>
				<a href="mm">Melanie Martinez</a>
				<a href="jb">Justin Bieber</a>
				<a href="ag">Ariana Grande</a>
				</div>
				</li>
				<li><a href="submit.html">Submit</a></li>
				<li><form method="get" action="albums.html" id="navform">
					Search an album: <input type="search" />
					<input type="submit" />
				</form></li>
			</ul>
</nav>

Answer 1

大多数只需设置一个像

这样的行高

#navform{
  line-height: 46px;
}

https://jsfiddle.net/obhh8arx/

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color:#eee;
}

li {
  float: left;
}

li a {
  display:block;
  color:black;
  padding:14px 16px;
  text-decoration:none;
}

li a:hover:not(#active) {
  background-color:#ddd;
}

#active {
  background-color:#ccc;
}
li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
  display: block;
}

footer{
  text-align:center;
}

#navform{
  line-height: 46px;
}

<nav>
			<ul>
				<li><a id="active" href="index.html">Home</a></li>
				<li><a href="albums.html">Albums</a></li>
				<li class="dropdown">
				<a href="javascript:void(0)" class="dropbtn">Artists</a>
				<div class="dropdown-content">
				<a href="ts">Taylor Swift</a>
				<a href="bm">Bruno Mars</a>
				<a href="mm">Melanie Martinez</a>
				<a href="jb">Justin Bieber</a>
				<a href="ag">Ariana Grande</a>
				</div>
				</li>
				<li><a href="submit.html">Submit</a></li>
				<li><form method="get" action="albums.html" id="navform">
					Search an album: <input type="search" />
					<input type="submit" />
				</form></li>
			</ul>
</nav>

Answer 2

您可以尝试添加此内容，

 display:table-cell;
    vertical-align : middle;

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color:#eee;
}

li {
    float: left;
}

li a {
    display:block;
    color:black;
    padding:14px 16px;
    text-decoration:none;
}

li a:hover:not(#active) {
    background-color:#ddd;
}

#active {
    background-color:#ccc;
}
li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

footer{
	text-align:center;
}

#navform{
vertical-align:middle;
height:45px;
display:table-cell;
vertical-align : middle;
}

<nav>
			<ul>
				<li><a id="active" href="index.html">Home</a></li>
				<li><a href="albums.html">Albums</a></li>
				<li class="dropdown">
				<a href="javascript:void(0)" class="dropbtn">Artists</a>
				<div class="dropdown-content">
				<a href="ts">Taylor Swift</a>
				<a href="bm">Bruno Mars</a>
				<a href="mm">Melanie Martinez</a>
				<a href="jb">Justin Bieber</a>
				<a href="ag">Ariana Grande</a>
				</div>
				</li>
				<li><a href="submit.html">Submit</a></li>
				<li><form method="get" action="albums.html" id="navform">
					Search an album: <input type="search" />
					<input type="submit" />
				</form></li>
			</ul>
</nav>

Answer 3

首先，我们需要了解垂直对齐。 1.垂直主要用于对齐任何元素内的文本。 2.它还可以用于垂直定位内联元素（如span，a和其他标记），但其父元素应具有静态高度。

解决方案： 1.给#navbar添加一些填充底部。 我们可以给输入元素提供维度。因此，通过id

访问input元素

navbar输入{

身高：有些高度 宽度：有些宽度 }