0

我有这个问题，我不能在我的生活中尝试删除这个（li）标签中的空白，下面我已经包含了一个屏幕截图，我想要做的是删除灰色菜单之前的白色栏，以及使整个菜单栏与底部的灰色栏对齐。

CSS

.menu ul {
 list-style: none;
 padding: 0;
 margin: 0;
}

.menu li {
 float: left;
 margin: 0 0.5em 0 0.5em;
 left: 0px;
 padding: 0;
 list-style: none;
}

.menu li a {
 float: left;
 display: inline-block;
 width: 161.3px;
 text-decoration: none;
 text-align: left;
 font-family: 'MyriadPro', sans-serif;
 font-size: .875em;
 color: #FFF;
 height: 1.2em;
}

#MenuGreyBar li a{
 display: block;
 width: 200px;
 list-style: none;
 left: 0px;
 height: 1.2em;
 float: left;
 margin: 0;
}

HTML

<div class="menu">
  <div>
    <ul id="MenuGreyBar">                        
      <li style="left: 0px;">
        <a href="#" class="bgGrey">&nbsp;</a>
      </li>
    </ul>
  </div>
  <ul>
    <li>
      <a href="about_us.html" class="bgLightBlue">About Us</a>
    </li>
    <li >
      <a href="Help_Support.html" class="bgMuddyGreen">Help & Support</a>
    </li>
    <li >
      <a href="Law_Info.html" class="bgGreen">Law & Information</a>
    </li>
    <!-- ... There are a few more. -->
  </ul>
</div>

图片：（它没有让我嵌入）
http://db.tt/tcSr5kGv

4

1 回答 1

0

如果这是您的问题，我不肯定，但这是我的猜测：

.menu li {

  float: left;
  margin: 0 0.5em 0 0.5em; /* We set a left margin for all menu elements here
                              which will cause them to jut over. We want this for
                              most elements*/
  left: 0px;
  padding: 0;
  list-style: none;
}

.menu li a {

   float: left;
   display: inline-block;
   width: 161.3px;
   text-decoration: none;
   text-align: left;
   font-family: 'MyriadPro', sans-serif;
   font-size: .875em;
   color: #FFF;
   height: 1.2em;
}

#MenuGreyBar li a{

  display: block;
  width: 200px;
  list-style: none;
  left: 0px;
  height: 1.2em;
  float: left;
  margin: 0;       /*The first menu item is special and needs no margin, so we try
                     to clear it, however we are clearing the anchor element in the li
                     block, and the margin is applied on the li block itself, so the li
                     block's margin is rendered before the anchor has any say*/
}

所以我们需要做的是清除实际li元素上的边距属性，这段代码会做到这一点：

#MenuGreyBar li{
 margin: 0;
}

应该这样做，我最好的猜测。

于 2013-01-09T02:51:28.203 回答