html - 我输入表单后导航中断

Question

好的，我的页面发生了一些奇怪的事情。我有一个看起来像这样的导航栏。

现在，当我在页面的任何位置添加表单输入时，它突然中断。此外，它只发生在 chrome 中，在其他浏览器中也没有问题。

这是什么原因造成的？..我检查了所有组件，发现如果我删除输入框，它就可以正常工作了。

 /*Layout*/
 .wrapper {
   background: red;
   max-width: 80em;
   /*1280px*/
   margin: 0 auto;
 }
 .header {
   background: white;
   padding-left: 45px;
   /*3.515625%;*/
 }
 .logo {
   float: left;
   padding-top: 17px;
   /*17px*/
   padding-bottom: 16px;
   /*16px*/
 }
 .header-right {
   float: right;
 }
 .navigation {
   float: left;
   padding: 0 12px;
 }
 .menu-btn {
   float: right;
 }
 .slider {
   height: 590px;
   background: grey;
 }
 img {
   display: block;
 }
 /*style for navigation bar*/
 .navigation ul {
   list-style: none;
 }
 .navigation ul li {
   float: left;
   padding: 0 15px;
   background: ;
 }
 .navigation ul li a {
   text-decoration: none;
   font-family: 'Montserrat', sans-serif;
   font-size: 9px;
   color: #49443d;
   background: url('../images/menu-arrow.png') right center no-repeat;
   padding-right: 7px;
   line-height: 59px;
 }
 .navigation ul li a:hover {
   color: #fe444b;
   background: url('../images/menu-arrow-active.png') right center no-repeat;
 }
 .navigation .active a {
   color: #fe444b;
   background: url('../images/menu-arrow-active.png') right center no-repeat;
 }
 .search-menu {
   float: left;
   width: 57px;
   height: 59px;
   background: url('../images/search-icon.png') center center no-repeat;
   border-left: 1px solid #ededed;
 }
 .search-menu a {
   display: block;
 }
 .shopping-cart {
   float: left;
   width: 56px;
   background: url('../images/shopping-cart.png') 17px center no-repeat;
   border-left: 1px solid #ececec;
   border-right: 1px solid #7d7d7d;
 }
 .cart-item-no {
   line-height: 59px;
   padding-right: 14px;
   float: right;
   font-family: 'Roboto', sans-serif;
   font-size: 11px;
   color: #575861;
 }
 .burger-btn {
   float: left;
   width: 56px;
   height: 59px;
   background: url('../images/burger-btn.png') center center no-repeat;
   background-color: #333333;
   border-left: 1px solid #161616;
   border-right: 1px solid #161616;
 }

<div class="wrapper">
  <!-- header starts here-->
  <div class="header clrfix">
    <div class="logo">
      <a href="#">
        <img src="images/logo.png">
      </a>
    </div>
    <div class="header-right clrfix">
      <div class="navigation">
        <ul>
          <li class="active"><a href="#">HOME</a>
          </li>
          <li><a href="#">PAGES</a>
          </li>
          <li><a href="#">BLOG</a>
          </li>
          <li><a href="#">PORTFOLIO</a>
          </li>
          <li><a href="#">ELEMENTS</a>
          </li>
          <li><a href="#">SHOP</a>
          </li>
        </ul>
      </div>

      <div class="menu-btn clrfix">
        <a href="#">
          <div class="search-menu">
          </div>
        </a>
        <a href="#">
          <div class="shopping-cart">
            <span class="cart-item-no">
             0
            </span>
          </div>
        </a>
        <a href="#">
          <div class="burger-btn">
          </div>
        </a>
      </div>
    </div>
  </div>
  <!-- slider starts here -->
  <div class="slider">
    <form>
      <input type="text" name="email" placeholder="Your email">
    </form>
  </div>
</div>

Answer 1

您需要将 float: left 和 width: 100% 添加到您的 header 类中以实现您的需要。此外，您还需要从 header 类中删除 padding-left 并将填充单独添加到 logo 类以消除任何底部滚动问题。试试下面的代码，让我知道是否一切正常。

/*Layout*/
 .wrapper {
   background: red;
   max-width: 80em;
   /*1280px*/
   margin: 0 auto;
 }
 .header {
   background: white;
   float: left;
   width: 100%;
   /*3.515625%;*/
 }
 .logo {
   float: left;
   padding: 16px;
 }
 .header-right {
   float: right;
 }
 .navigation {
   float: left;
   padding: 0 12px;
 }
 .menu-btn {
   float: right;
 }
 .slider {
   height: 590px;
   background: grey;
 }
 img {
   display: block;
 }
 /*style for navigation bar*/
 .navigation ul {
   list-style: none;
 }
 .navigation ul li {
   float: left;
   padding: 0 15px;
   background: ;
 }
 .navigation ul li a {
   text-decoration: none;
   font-family: 'Montserrat', sans-serif;
   font-size: 9px;
   color: #49443d;
   background: url('../images/menu-arrow.png') right center no-repeat;
   padding-right: 7px;
   line-height: 59px;
 }
 .navigation ul li a:hover {
   color: #fe444b;
   background: url('../images/menu-arrow-active.png') right center no-repeat;
 }
 .navigation .active a {
   color: #fe444b;
   background: url('../images/menu-arrow-active.png') right center no-repeat;
 }
 .search-menu {
   float: left;
   width: 57px;
   height: 59px;
   background: url('../images/search-icon.png') center center no-repeat;
   border-left: 1px solid #ededed;
 }
 .search-menu a {
   display: block;
 }
 .shopping-cart {
   float: left;
   width: 56px;
   background: url('../images/shopping-cart.png') 17px center no-repeat;
   border-left: 1px solid #ececec;
   border-right: 1px solid #7d7d7d;
 }
 .cart-item-no {
   line-height: 59px;
   padding-right: 14px;
   float: right;
   font-family: 'Roboto', sans-serif;
   font-size: 11px;
   color: #575861;
 }
 .burger-btn {
   float: left;
   width: 56px;
   height: 59px;
   background: url('../images/burger-btn.png') center center no-repeat;
   background-color: #333333;
   border-left: 1px solid #161616;
   border-right: 1px solid #161616;
 }

看看这个 Fiddle 以获得更多说明。