Question

这个问题好像是通过互联网频繁询问，但我仍然无法找到解决方案。

我有这个导航栏（它使用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放在锚点中，这样我就可以调整它们的大小。然而，他们似乎也将它们改回块元素。

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

Answer 1

幸运的是，你生活在2009年，通过浏览器广泛采用inline-block：Cross browser inline-block。

如果它仅适用于高度（并且li的所有内容都适合每一行），您希望使用line-height: 123px，它设置内联框的高度至123px（每行，即）。

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

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

干杯，

Answer 2

因为它不是2009年，当我第一次不得不解决这个:)我得到了Firefox的解决方案与以下css类：

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

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

思南。

带宽度的内联元素

2 个答案: