HTML和CSS：我的表单导致其父容器中的所有其他元素未对齐

debugcn 发表于 Dev

约翰·伯格奎斯特

这是我正在研究的网站。不幸的是，我的表单导致导航栏中的所有其他元素在垂直方向上未对齐（向下移动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>

迪帕斯

如果我理解正确，则只需要添加vertical-align:top您的内容即可，.nav_element因为inline-block默认情况下该设置为baseline

这是一个片段：

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

<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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。