如何防止重叠的空跨度标签？

Question

基本上，我有一个 div 容器，有两个主要的 span 标签。第一个跨度标签用于菜单，其中我有第 1 页跨度、第 2 页跨度等。每个页面跨度都有一个 display:block 和一个背景图像（这是它的唯一目的，没有首选内容）。

我的问题是它们重叠。我已经确保主菜单跨度足够大。

Answer 1

所以，如果我理解正确，你有这样的事情：

<div id="container">
  <span id="menu">
    <span>Item 1</span>
    <span>Item 2</span>
    <span>Item 3</span>
  </span>
  <span>
    Something else...
  </span>
</div>

问题可能是您试图在原生内联的跨度内渲染一个框（带有 display:block 的跨度）。因此，您可能会从实际使用盒子内部的盒子中受益。我建议这样。

按照你的风格：

     ul#menu{
       display: block;
       padding: 0;
       list-style: none;
       overflow: hidden;
     }

     #menu li{
       float: left;
       padding-right: 20px;
     }

在您的标记中：

<div id="container">
  <ul id="menu">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
  <span>
    Something else...
  </span>
</div>

这样，您可以在标记中保留语义，说明菜单实际上是一个列表，但您正在渲染一些看起来像水平导航的东西。

框内的内联元素应该总是能正常工作，但反过来你会在某些浏览器中发现一些时髦的效果。