Question

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

我的问题是它们是重叠的。我确保主菜单范围足够大。

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>

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

框内的内联元素应始终正常工作，但相反的方式会在某些浏览器中找到一些时髦的效果。

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

1 个答案: