css大小修復需要，請

Question

我想做一個菜單的種類。

代碼可以在這裏找到： http://jsfiddle.net/Chumillas/WyA3U/ （謝謝你丘米利亞斯教我關於這一點）

如果您通過鏈接查看以上的結果，你會看到有一個設計問題與此代碼 - 所有可見的菜單項都具有相同的長度（960x75像素），這看起來不美化它們之間的距離是不均勻：

.titleCell 
{ 
    width: 75px; 

如何解決它，這樣的長度實際上是的內容（+填充）而不是必須將其固定到75px，以便菜單項之間的距離是相同的？

• 編輯 -

，如果它不能這樣做，我會很樂意與鏈接到一個類似的事情在網上。再次日Thnx

• 編輯2 -

如果有人想知道我來自哪裏得到這個東西本來：http://www.devinrolsen.com/css-hide-and-display-content/

Answer 1

您可以從.titleCell strong刪除position:absolute，改變padding-left到padding-right一個更大的值，諸如40px之類的東西。同時刪除width從.titleCell

這裏演示：http://jsfiddle.net/ktCb8/

作爲一個提醒，不要對strong標籤應用規則。設計父母div或父母li。

Answer 2

雖然您已經接受了答案，但我已經使用一些可能需要實施的佈局修復程序對您的小提琴進行了更新。

看一看：http://jsfiddle.net/WyA3U/3/

Answer 3

My two cents —清潔/更少的兩個世界：

#contentBox { position: relative; font-size: 80%; } 
 
#contentBox > li 
 
{ 
 
    display: inline; 
 
    padding: 6px; 
 
    margin: 0 1px; 
 
    cursor: pointer; 
 
} 
 
#contentBox > li:hover, #contentBox ul 
 
{ 
 
    border: 1px solid #CCC; 
 
    background-color: #FFF; 
 
} 
 
#contentBox > li:hover { 
 
    border-bottom-color: #FFF; 
 
    margin: 0; 
 
} 
 
#contentBox > li:hover ul 
 
{ 
 
    display: block; 
 
} 
 
#contentBox ul 
 
{ 
 
    position: absolute; 
 
    display: none; 
 
    border-width: 1px; 
 
    width: 500px; 
 
    padding: 6px; 
 
    cursor: default; 
 
    margin-top: 6px; 
 
    z-index: -1; 
 
}

<ul id="contentBox"> 
 
    <li> 
 
     Go 
 
     <ul> 
 
      <li> 
 
       <h1> 
 
        Quickly jump to your desired location 
 
       </h1> 
 
       Lorem ipsum dolor sit amet. </li> 
 
     </ul> 
 
    </li> 
 
    <li> 
 
     Messages 
 
     <ul> 
 
      <li> 
 
       <h1> 
 
        Access personal and system messages and alerts 
 
       </h1> 
 
       Lorem ipsum dolor sit amet. </li> 
 
     </ul> 
 
    </li> 
 
    <li> 
 
     Assets 
 
     <ul> 
 
      <li> 
 
       <h1> 
 
        Manage your assets 
 
       </h1> 
 
       Lorem ipsum dolor sit amet. </li> 
 
     </ul> 
 
    </li> 
 
    <li> 
 
     Support 
 
     <ul> 
 
      <li> 
 
       <h1> 
 
        Need help? 
 
       </h1> 
 
       Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</li> 
 
     </ul> 
 
    </li> 
 
</ul>