个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 04:48:40 24 4
gpt4 key购买 nike

我在代码后添加了图片，以便您更好地理解。

因此，我使用无序列表 (ul) 创建了一个导航栏，当我向列表中添加一个文本框时，它会占用相邻栏的空间。

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

最佳答案

因为 t2 类的位置相对和 left:-40px 所以为了即时解决方案，我更改了输入字段的 li 类。所以我将 .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>

关于html - 当添加为列表时，导航栏中的文本框会占据相邻的选项卡，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40820269/

24 4 0
文章推荐： html - 为什么不为 IE7+ 使用 col-sm-6
文章推荐： html - 从一个页面移动到另一个页面时，导航菜单会闪烁，仅在 Chrome 中
文章推荐： javascript - Myghtyslider chavroka 的 slider 宽度自动缩放
文章推荐： css - 导航栏也不是流动的，它不在容器内
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com