Question

我有这个问题，我不能为我的生活尝试删除此（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

Answer 1

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

.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元素上的margin属性，这段代码会这样做：

#MenuGreyBar li{
 margin: 0;
}

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

如何从<li> </li>中删除空格

1 个答案: