1

这个问题似乎在互联网上经常被问到，但我仍然找不到解决方案。

我有这个内联显示的导航栏（它使用 jQuery 在选项卡之间切换）。我在这些上显示背景图像，为了使它们更明确，我需要使它们更宽更高。

<div id="tabs">
<ul id="tabs-nav-cont">
    <li class="tabs-navs"><a href="#tabs-1">Nav 1</div></a></li>
    <li class="tabs-navs"><a href="#tabs-2">Nav 2</div></a></li>
    <li class="tabs-navs"><a href="#tabs-3">Nav 3</div></a></li>
    <li class="tabs-navs"><a href="#tabs-4">Nav 4</a></li>
</ul>
</div>

我似乎可以做到这一点的唯一方法是将它们恢复为块元素。这不是我想要的，因为它们垂直显示。所以我尝试将 div 放在锚点中，以便调整它们的大小。然而，他们似乎也将它们改回块元素。

我很困惑。有人请帮忙:)

4

2 回答 2

4

幸运的是，你生活在 2009 年，inline-block 被浏览器广泛采用：跨浏览器 inline-block。

如果它只是为了高度（并且lis 的所有内容都适合每一行），那么您希望使用line-height: 123px，它将内联框的高度设置为 123px（即每行）。

或者，很常见的是，如果导航是左对齐的，则浮动它们：

#nav li {
  display: block;
  float: left;
}

干杯，

于 2009-07-06T08:30:39.600 回答
1

因为当我第一次必须解决这个问题时不是 2009 年 :) 我得到了具有以下 css 类的 Firefox 解决方案：

.ib { display: -moz-inline-block; display: inline-block;}

这是我在必要时使用的通用内联块类...

思南。

于 2009-07-07T22:55:28.997 回答