Question

嗨我只是想编写一个像BBC一样的网站，只是为了练习这样做我在li ul项中遇到错误我不知道问题但是当我给它一个border-right边框比原始菜单更高，我在这里粘贴我的代码请检查并帮助我？简单来说，我希望列表项的边框等于“Signin”和“logo”div的边框

    <html>
    <head>
    <title>BBC</title>
    <style>
    body{
    margin:0;
    font-family:Arial,Helvetica,freesans,sans-serif;

    }

    #top{
    width:100%;
    height:50px;

    }
    .keepcenter{
    width:1100px;
    margin: 0 auto;
    }
    #logo{
    border-right:1px solid #CCCCCC;
    float:left;
    padding-right:5px;
    height:100%;
    }
    #signin{
    font-weight:bold;
    font-size:0.9em;
    border-right:1px solid #CCCCCC;
    width:200px;
    height:100%;
    float:left;
    }
    #signin img{
    position:relative;
    top:5px;
    margin-left:15px;
    }

    #signin p{
        display:inline;
        position:relative;
        top:1px;
        padding-left:5px;
    }
    #menutop{
    float:left; 
    }
    #menutop ul{
    list-style-type:none;
    margin:0;
    padding:0;

    }
    #menutop li{
    padding:15px 20px 10px 20px;
    display:inline;
    font-weight:bold;
    font-size:0.9em;
    float:left;
    border-right:1px solid #CCCCCC;
    height:100%;

    }
    </style>
    </head>

   <body>
   <div id="container">
    <div id="top">

    <div class="keepcenter">

   <div id="logo">
   <img src="images/logo.jpg" />
   </div>
   <div id="signin">
   <img src="images/signicon.png" /><p>Sign In</p>
   </div>
   <div id="menutop">
   <ul>
   <li>Home</li>
   <li>Home</li>
   <li>Home</li>
   <li>Home</li>
   <li>Home</li>
   </ul>
   </div>

   </div>
</div>


</div>

</body>

</html>

Answer 1

只需从列表项中删除顶部和底部填充。

＆＃13;

body {
  margin: 0;
  font-family: Arial, Helvetica, freesans, sans-serif;
}
#top {
  width: 100%;
  height: 50px;
}
.keepcenter {
  width: 1100px;
  margin: 0 auto;
}
#logo {
  border-right: 1px solid #CCCCCC;
  float: left;
  padding-right: 5px;
  height: 100%;
}
#signin {
  font-weight: bold;
  font-size: 0.9em;
  border-right: 1px solid #CCCCCC;
  width: 200px;
  height: 100%;
  float: left;
}
#signin img {
  position: relative;
  top: 5px;
  margin-left: 15px;
}
#signin p {
  display: inline;
  position: relative;
  top: 1px;
  padding-left: 5px;
}
#menutop {
  float: left;
}
#menutop ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
#menutop li {
  padding: 0 20px;
  display: inline;
  font-weight: bold;
  font-size: 0.9em;
  float: left;
  border-right: 1px solid #CCCCCC;
  height: 100%;
}

＆＃13;

<div id="container">
  <div id="top">
    <div class="keepcenter">
      <div id="logo">
        <img src="http://lorempixel.com/40/40" alt="BBC" />
      </div>
      <div id="signin">
        <img src="http://lorempixel.com/g/10/10" alt="" />
        <p>Sign In</p>
      </div>
      <div id="menutop">
        <ul>
          <li>Home</li>
          <li>Home</li>
          <li>Home</li>
          <li>Home</li>
          <li>Home</li>
        </ul>
      </div>
    </div>
  </div>
</div>

＆＃13;

列表是浮动的，这意味着它的基线不一定与#signin div相同。在我的片段中，div中的img足够小，没有效果，但根据其大小，div的基线（以及p的位置）将向下移动。您可能需要在ul。中补偿这一点。

无法摆脱菜单中的列表项高度

1 个答案: