在导航中垂直对齐搜索栏

Posted

技术标签:

【中文标题】在导航中垂直对齐搜索栏【英文标题】:Vertically aligning search bar in navigation 【发布时间】:2017-09-27 17:07:52 【问题描述】:

我需要搜索栏在导航中垂直对齐,这样它就不会靠近底部。

a 
  text-decoration: none;
  color: black;


a:hover 
  text-decoration: underline;
  color: black;


#searchtxt,
.searchtxt 
  border: 1px solid #000000;
  border-right: none;
  font-size: 16px;
  padding: 3px;
  outline: none;
  width: 250px;
  -webkit-border-top-left-radius: 10px;
  -webkit-border-bottom-left-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -moz-border-radius-bottomleft: 10px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;


#search,
.search 
  border: 1px solid #000000;
  font-size: 16px;
  padding: 3px;
  font-weight: bold;
  cursor: pointer;
  outline: none;
  -webkit-border-top-right-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
  -moz-border-radius-topright: 10px;
  -moz-border-radius-bottomright: 10px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;


nav 
  height: 30px;
  padding-top: 10px;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
  background-color: #efefef;


nav a 
  padding-left: 20px;
  padding-right: 20px;
<nav>
  <a href="index.html">Home</a>
  <a href="albums.html">Albums</a>
  <a href="artists.html">Artists</a>
  <!--dropdown
					AC/DC
					Led Zeppelin
					Kansas-->
  <a href="submit.html">Submit</a>
  <input type="textbox" placeholder="Find an Album" class="searchtxt" /><input type="submit" value="Search" class="search" />
</nav>

【问题讨论】:

【参考方案1】:

在你的 CSS 中。 移除 nav 和 padding-top 上的固定高度 - height: 30px;padding-top: 10px;

nav a 
    /** remove **/
    padding-left: 20px;
    padding-right: 20px;

    /** add **/
    padding: 20px;
    display: inline-block;

【讨论】:

以上是关于在导航中垂直对齐搜索栏的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Bootstrap 4 中垂直对齐导航栏切换器?

Bootstrap 3 - 导航栏内容的垂直对齐

IOS - 垂直对齐导航栏中的后退按钮

<ul> 水平导航栏...垂直对齐元素

<ul> 水平导航栏...垂直对齐元素

导航栏菜单在小屏幕上不垂直对齐和汉堡菜单的位置