Question

这是我正在努力的网站。不幸的是，我的表单会导致导航栏中的所有其他元素垂直对齐（向下移动5个像素）。有什么方法可以解决这个问题，同时保持表单的布局（输入框在表单内的位置）相同吗？如果可能的话，我想将表格保留在下面的导航栏中。感谢。

<nav>
<form action="search.php" method="post" id="Search">
<input type="search" class="searchbox" name="query" placeholder="Enter Your Search Term Here"/>
</form>
<div class="nav_element" id="BluRays">&nbsp;</div>
<div class="nav_element" id="DVDs">&nbsp;</div>
<div class="nav_element" id="Login">&nbsp;</div>
<div class="nav_element" id="Register">&nbsp;</div>
<div class="nav_element" id="My_Account">&nbsp;</div>
</nav>

Answer 1

如果我理解正确，您只需将vertical-align:top添加到.nav_element，因为inline-block默认设置为baseline

这是一个片段：

＆＃13;

html,
body {
  margin: 0;
  padding: 0;
  font-family: Sans-Serif;
}
.site_wrapper {
  position: absolute;
  margin: auto;
  width: 1380px;
  background-color: blue;
}
nav {
  position: absolute;
  left: 200px;
  height: 40px;
  width: 1180px;
  display: inline-block;
  text-align: center;
}
.logo {
  top: 0;
  left: 0;
  display: inline-block;
  height: 40px;
  width: 200px;
  background-image: url(logo.png);
}
.nav_element {
  text-align: center;
  height: 40px;
  width: 140px;
  background-color: white;
  display: inline-block;
  vertical-align:top;
  -o-transition: all .5s ease-in-out;
  -ms-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}
.nav_element:hover {
  cursor: pointer;
}
#Search {
  width: 280px;
  text-align: center;
  height: 40px;
  background-color: white;
  display: inline-block;
  text-align: center;
  margin: 0;
}
.searchbox {
  margin-top: 5px;
  color: #c3c8c8;
  height: 30px;
  width: 200px;
  text-align: left;
}
#DVDs {
  background-image: url("/img/buttons/DVD.png");
}
#DVDs:hover {
  background-image: url("/img/buttons/DVD_highlight.png");
}
#BluRays {
  background-image: url("/img/buttons/BluRays.png");
}
#BluRays:hover {
  background-image: url("/img/buttons/BluRays_highlight.png");
}
#BluRays {
  background-image: url("/img/buttons/BluRay.png");
}
#BluRays:hover {
  background-image: url("/img/buttons/BluRay_highlight.png");
}
#Login {
  background-image: url("/img/buttons/Login.png");
}
#Login:hover {
  background-image: url("/img/buttons/Login_highlight.png");
}
#Logout {
  background-image: url("/img/buttons/Logout.png");
}
#Logout:hover {
  background-image: url("/img/buttons/Logout_highlight.png");
}
#Register {
  background-image: url("/img/buttons/Register.png");
}
#Register:hover {
  background-image: url("/img/buttons/Register_highlight.png");
}
#My_Account {
  background-image: url("/img/buttons/Account.png");
}
#My_Account:hover {
  background-image: url("/img/buttons/Account_highlight.png");
}
aside {
  height: 400px;
  width: 200px;
  background-color: #dfe0e1;
}
.basket {
  position: absolute;
  height: 800px;
  right: 0;
  background-color: orange;
}
footer {
  position: absolute;
  bottom: 0;
  text-align: center;
  font-weight: bold;
  background-color: red;
  height: 30px;
  width: 100%;
}

＆＃13;

<body>
  <div class="site_wrapper">
    <div class="logo">&nbsp;</div>

    <nav>
      <form action="search.php" method="post" id="Search">
        <input type="search" class="searchbox" name="query" placeholder="Enter Your Search Term Here" />
      </form>
      <div class="nav_element" id="BluRays">&nbsp;</div>
      <div class="nav_element" id="DVDs">&nbsp;</div>
      <div class="nav_element" id="Login">&nbsp;</div>
      <div class="nav_element" id="Register">&nbsp;</div>
      <div class="nav_element" id="My_Account">&nbsp;</div>
    </nav>

  </div>
</body>

＆＃13;

Answer 2

简单地将vertical-align: top;提交给.nav_element即可解决您的问题。

.nav_element {
text-align:center;
height:40px;
width:140px;
background-color:white;
display:inline-block;
    vertical-align: top;
transition:all .5s ease-in-out;
}

检查Fiddle.

HTML＆amp; CSS：我的表单导致其父容器中的所有其他元素变得不对齐

2 个答案: