带宽度的内联元素答案

【问题标题】：Inline Elements With Width带宽度的内联元素
【发布时间】：2010-11-08 07:55:06
【问题描述】：

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

我有这个内联显示的导航栏（它使用 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 放在锚点中，以便调整它们的大小。但是，它们似乎也将它们改回块元素。

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

【问题讨论】：

标签： html css width inline

【解决方案1】：

幸运的是，你生活在 2009 年，内联块在浏览器中被广泛采用：Cross browser inline-block。

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

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

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

干杯，

【讨论】：

感谢上帝 2009。我不知道存在内联块。谢谢！
;-) @Ben：不客气。 @Stobor：我上周再次访问了该链接，所以它在我的浏览器历史记录中是可以访问的。

【解决方案2】：

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

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

这是我在必要时使用的通用 inline-block 类...

思南。

【讨论】：