水平菜单中的项目之间有间隙

发布于 2024-09-27 18:57:38 字数 938 浏览 4 评论 0原文

由于某种原因，li 项目的左右边框不接触，它们之间大约有 4-5 px 的间隙。

#menucontainer {
  display: block;
  float: left;
  width: 100%;
}

ul#menu {
  display: block;
  padding: 5px 0px 5px 15px;
}

ul#menu li {
  display: inline;
  padding: 3px;
  border-right: 1px solid #D8D6FF;
  border-left: 1px solid #D8D6FF;
  margin: 0 !important;
}

ul#menu li a {
  padding: 3px;
  margin: 0;
}

<div id="menucontainer">
  <ul id="menu">
    <li>
      <a href="google.com"></a>
    </li>
    <li>
      <a href="google.com"></a>
    </li>
    <li>
      <a href="google.com"></a>
    </li>
  </ul>
</div>

我正在使用 960 网格系统 CSS 重置（这似乎并没有改变我的问题）。我需要在 IE 7+ 和 Firefox 中正常工作 - IE8 和 FF 中存在问题。

原文

For some reason the left and right borders of the li items do not touch there is about a 4-5 px gap between them.

#menucontainer {
  display: block;
  float: left;
  width: 100%;
}

ul#menu {
  display: block;
  padding: 5px 0px 5px 15px;
}

ul#menu li {
  display: inline;
  padding: 3px;
  border-right: 1px solid #D8D6FF;
  border-left: 1px solid #D8D6FF;
  margin: 0 !important;
}

ul#menu li a {
  padding: 3px;
  margin: 0;
}

<div id="menucontainer">
  <ul id="menu">
    <li>
      <a href="google.com"></a>
    </li>
    <li>
      <a href="google.com"></a>
    </li>
    <li>
      <a href="google.com"></a>
    </li>
  </ul>
</div>

I am using the 960 grid system CSS reset (which doesn't seem to change my issue w/ or w/o it). I need to get this working in IE 7+ and Firefox - Issue exists in IE8 and FF.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

聆听风音 2024-10-04 18:57:38

您正在使用 display: inline。这意味着每个 li 元素之间的空白字符都会受到尊重，并将被折叠成一个空格。如果需要，您可以尝试使用 float 来代替，或者删除这些元素之间的所有空格。

 <ul id="menu">              
     <li><a href="http://example.com"></a>
     </li><li><a href="http://example.com"></a>
     </li><li><a href="http://example.com"></a></li>
 </ul>

可以，或者如果您倾向于使用浮动，

#menu li {
    float: left;
}

而不是 display: inline

You're using display: inline. That means that whitespace characters between each of those li elements are respected, and will be collapsed into a single space. If you need to, you can try using floats instead, or remove all whitespace between those elements.

 <ul id="menu">              
     <li><a href="http://example.com"></a>
     </li><li><a href="http://example.com"></a>
     </li><li><a href="http://example.com"></a></li>
 </ul>

would work, or if you're inclined to using floats,

#menu li {
    float: left;
}

instead of display: inline

回复收藏 0 原文

仙女山的月亮 2024-10-04 18:57:38

遵循 Yi Jiang 的解决方案：

<div id="menucontainer">      
  <ul id="menu">              
       <li><a href="google.com"></a></li><!--
    --><li><a href="google.com"></a></li><!--
    --><li><a href="google.com"></a></li>
  </ul>
</div>

确保您确实没有任何空白。向左浮动可能会导致具有翻转 a:hover 的菜单出现问题。

To follow on from Yi Jiang's solution:

<div id="menucontainer">      
  <ul id="menu">              
       <li><a href="google.com"></a></li><!--
    --><li><a href="google.com"></a></li><!--
    --><li><a href="google.com"></a></li>
  </ul>
</div>

ensures that you really don't have any white space. Floating left can cause problems in menus that have a rollover a:hover.

回复收藏 0 原文

滴情不沾 2024-10-04 18:57:38

您可以对外部

元素使用 display:flex，而不是对 
使用 display:inline ;-标签。

标记

<ul id="menu">              
 <li><a href="http://example.com"></a></li>
 <li><a href="http://example.com"></a></li>
 <li><a href="http://example.com"></a></li>
</ul>

CSS

#menu {
    display:flex;
}

You can use display:flex for the outer <ul>-element instead of using display:inline for the <li>-tags.

Markup

<ul id="menu">              
 <li><a href="http://example.com"></a></li>
 <li><a href="http://example.com"></a></li>
 <li><a href="http://example.com"></a></li>
</ul>

CSS