当添加为列表时，导航栏中的文本框会占据相邻的选项卡

Question

我在代码后面加了图，方便大家理解。

所以我使用无序列表 (ul) 创建了一个导航栏，当我向列表中添加一个文本框时，它占据了相邻栏的 space。

这是 HTML 和 CSS 代码。

<html>
    <head>
        <style type="text/css">
            *{
                margin:0px;
                padding:0px;
            }

            .top-header{
                width:100%;
                height:40px;
                background:#FFFFFF;
            }

            .top-header>img{
                float:left;
                width:70px;
                height:25px;
                padding-left:10px;
                padding-top:8px;
                padding-right:10px;
                padding-left: 100px;
            }

            .signinimg{
                float:left;
                border-left:1px solid #E4E4E4;
                padding-top: 8px;
                height:32px;
                padding-left: 20px;
            }

            .signin{
                float:left;
                padding-top:12px;
                font-family:Arial,Helvetica,freesans,sans-serif;
                font-size:80%;
                padding-right:10px;
                font-weight:bold;
                padding-right:100px;
            }

            .topnav{
                float:left;
                list-style:none;
            }

            .topnav>.t1{
                height:40px;
                width:60px;
                border-left:1px solid #E4E4E4;
                display:inline-block;
                 text-align: center;
            }

            .topnav>.t2{
                height:40px;
                width:140px;
                border-left:1px solid #E4E4E4;
                display:inline-block;
                text-align: center;
                border-right:1px solid #E4E4E4;

            }

            .topnav>.t1>a{
                text-decoration: none;
                color:black;
                font-family:Arial,Helvetica,freesans,sans-serif;
                font-weight: bold;
                font-size:80%;
                line-height:40px;

            }

            .topnav>.t2>a{
                text-decoration: none;
                color:black;
                font-family:Arial,Helvetica,freesans,sans-serif;
                font-weight: bold;
                font-size:80%;
                line-height:40px;
                position: relative;
                left:-40px;
            }
        </style>
        <title>Home-BBC News</title>
    </head>
    <body>
        <div class="top-header">
            <img src="logo.png">
            <div class=signinimg><img src="signin.PNG"></div>
            <div class="signin">Sign In</div>
            <ul class="topnav">
                <li class="t1"><a href="#">News</a></li> 
                <li class="t1"><a href="#">Sport</a></li> 
                <li class="t1"><a href="#">Weather</a></li> 
                <li class="t1"><a href="#">Shop</a></li> 
                <li class="t1"><a href="#">Earth</a></li> 
                <li class="t1"><a href="#">Travel</a></li> 
                <li class="t2"><a href="#">More</a></li> 
                <li class="t2"><a href="#"><input type="text"></a></li> 
            </ul> 
        </div> 
    </body>
</html>

Answer 1

因为t2 class which position relative and left:-40px 所以为了即时解决我改变了输入字段的li class。所以我将 .t2 宽度更改为 60px 并从 .t2>a 中删除位置和 left:-40px。有什么问题可以评论问我。

* {
   margin: 0px;
  padding: 0px;
}

.top-header {
  width: 100%;
  height: 40px;
  background: #FFFFFF;
}

.top-header>img {
  float: left;
  width: 70px;
  height: 25px;
  padding-left: 10px;
  padding-top: 8px;
  padding-right: 10px;
  padding-left: 100px;
}

.signinimg {
  float: left;
  border-left: 1px solid #E4E4E4;
  padding-top: 8px;
  height: 32px;
  padding-left: 20px;
}

.signin {
  float: left;
  padding-top: 12px;
  font-family: Arial, Helvetica, freesans, sans-serif;
  font-size: 80%;
  padding-right: 10px;
  font-weight: bold;
  padding-right: 100px;
}

.topnav {
  float: left;
  list-style: none;
}

.topnav>.t1 {
  height: 40px;
  width: 60px;
  border-left: 1px solid #E4E4E4;
  display: inline-block;
  text-align: center;
}

.topnav>.t2 {
  height: 40px;
  width: 60px;
  border-left: 1px solid #E4E4E4;
  display: inline-block;
  text-align: center;
  border-right: 1px solid #E4E4E4;
}

.topnav>.t1>a {
  text-decoration: none;
  color: black;
  font-family: Arial, Helvetica, freesans, sans-serif;
  font-weight: bold;
  font-size: 80%;
  line-height: 40px;
}

.topnav>.t2>a {
  text-decoration: none;
  color: black;
  font-family: Arial, Helvetica, freesans, sans-serif;
  font-weight: bold;
  font-size: 80%;
  line-height: 40px;
 
}

.topnav>.search {
  height: 40px;
  display: inline-block;
}

   

 <body>
    <div class="top-header">
     <img src="logo.png">
     <div class=signinimg><img src="signin.PNG"> </div>
     <div class="signin"> Sign In</div>
     <ul class="topnav">
      <li class="t1"><a href="#">News</a></li>
      <li class="t1"><a href="#">Sport</a></li>
      <li class="t1"><a href="#">Weather</a></li>
      <li class="t1"><a href="#">Shop</a></li>
      <li class="t1"><a href="#">Earth</a></li>
      <li class="t1"><a href="#">Travel</a></li>
      <li class="t2"><a href="#">More</a></li>
      <li class="search">
        <a href="#">
          <input type="text">
        </a>
      </li>


    </ul>

  </div>
</body>

当添加为列表时，导航栏中的文本框会占据相邻的选项卡

text box in my navigation bar when added as a list it takes up the adjacent tab

html

css

navbar