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 に答える