宽度内联元素

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年，其中内联块通过浏览器广泛采用：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;} 

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

思南。