寬度內聯元素

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的類，我使用必要...

思南。