Question

enter image description here

firefox是唯一没有显示这种神奇差距的浏览器。我真的不明白为什么这个差距表现得很诚实，我假设你们中的一些人遇到过这个并且有一个简单的解决方案我真的不明白为什么会出现这种差距说实话，我假设有些人遇到过这个问题并且有一个简单的解决方案

这里是我的css菜单代码，这里是我的css菜单代码，这里是我的css菜单代码

 #tabs {
      font: bold 11px/1.5em Verdana;
      float:left;
      width:800px;
      height:35px;
      background:#FFFFFF;
      font-size:93%;
      line-height:normal;
      }
    #tabs ul {
    margin:0;
    padding:7px 10px 0 10px;
    list-style:none;
      }
    #tabs li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabs a {
      float:left;
      background:url("images/tableft14.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #tabs a span {
      float:left;
      display:block;
      background:url("images/tabright14.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#666;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabs a span {float:none;}
    /* End IE5-Mac hack */
    #tabs a:hover span {
      color:#000;
      }
    #tabs a:hover {
      background-position:0% -42px;
      }
    #tabs a:hover span {
      background-position:100% -42px;
      }

这是菜单div下面的css代码

#main-lower {

    height: 700px;
    background-color:white;

}
#specials {
    background-color:#F0F0F0;
    width: 870px;
    height: 100%;
    float: left;
    border:1px solid #e2e2e2;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

我真的不明白为什么这个差距表现得很诚实，我假设你们中有些人遇到过这个并且有一个简单的解决方案

直接从源代码

    <div id="tabs"> 
     <ul> 
<li><a href='http://' title=''><span>New Deals</span></a></li><li><a href='http://' title=''><span>Liquor</span></a></li><li><a href='http://' title=''><span>Beverages</span></a></li><li><a href='http://' title=''><span>General</span></a></li><li><a href='http://' title=''><span>Fountain Drinks</span></a></li> 
     </ul>
    </div>

Answer 1

如果<li>元素之间有新的行，那么很多时候你会在列表上出现“神秘的空白”。

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

将它们扔在一条线上，看看是否能摆脱你的差距。

<ul><li></li><li></li><li></li></ul>

如果可以，那么这是：Unwanted margin in inline-block list items

的副本

由于您的差距低于您的列表，您将需要检查其下方项目的css显示，并可能还删除那里的行。 但是如果没有看到你的HTML，这可能根本不是问题！

有关为什么在内联元素上显示间隙的说明，请参见此处： http://css-tricks.com/fighting-the-space-between-inline-block-elements/

摘录：

这不是“错误”（我不认为）。这只是设置元素的方式在线上工作。您希望键入的单词之间有空格空间对吗？这些块之间的空间就像空格一样在单词之间。这并不是说规格无法更新说内联块元素之间的空格应该没什么，但我是相当肯定，这是一种巨大的蠕虫，不太可能发生。

Answer 2

将填充顶部从7px更改为8px - ＆gt;＆gt;填充：8px 10px 0 10px;

是的，我很确定我的html与它无关，而且这不是间距问题，因为我使用php来调用我的li

css菜单中顶部和底部div之间的魔术差距

2 个答案: