子元素自動寬度（大於父元素）

Question

我有一個ul導航菜單與等距的inline-block元素，每個元素都有一個子菜單。

問題是我無法獲得子菜單的寬度以適應子元素的長度。它繼承了父級的寬度。

我可以設置一個固定的寬度，但由於我的每個子菜單都有不同的長度不同的鏈接，因此我希望每個子菜單都具有自動寬度並且與其內容完全吻合。

長碼腳本的抱歉。你可以在這裏看到的jsfiddle這可能會更好地解釋這個問題：

http://jsfiddle.net/sbd81hco/

HTML

<nav> 
    <ul> 
     <li><a href="">Section A</a><ul> 
       <li><a href="">Longer Child Text</a></li> 
       <li><a href="">Longer Child Text</a></li> 
       <li><a href="">Longer Child Text</a></li> 
      </ul> 
     </li> 
     <li><a href="">Section B</a> 
      <ul> 
       <li><a href="">Longer Child Text</a> </li> 
       <li><a href="">Longer Child Text</a></li> 
       <li><a href="">Longer Child Text</a></li> 
      </ul> 
     </li> 
    </ul> 
</nav> 

CSS

nav > ul { 
    display: inline-block; 
    text-align: justify; 
} 

nav > ul > li { 
    display: inline-block; 
    position: relative; 
} 

nav > ul > li > ul { 
    display: none; 
    position: absolute; 
    top: 40px; 
    left: 0; 
} 

nav > ul > li > ul > li > a { 
    width: 100%; 
    height: 100%; 
    display: block; 
} 

nav > ul > li > ul:before { 
    content:' '; 
    width: 100%; 
    height: 40px; 
    position: absolute; 
    top: -40px; 
    left: 0; 
} 

nav > ul > li:hover > ul { 
    display: inline-block; 
} 

nav > ul:after { 
    content:' '; 
    display: inline-block; 
    width: 100%; 
    height: 41px; 
} 

Answer 1

一種常用的方法是添加white-space: nowrap到期望的元素。這樣做時，元素的寬度將擴大以適應其內容。

Example Here

nav > ul > li > ul { 
    display: none; 
    text-align: left; 
    position: absolute; 
    top: 40px; 
    left: 0; 
    padding: 10px; 
    background-color: #bfe17e; 
    white-space: nowrap; 
} 

此外，你也可以爲了防止元件從佔用太多的橫向空間設置與text-overflow: ellipsis沿元素max-width。像這樣的東西會工作：

Example Here

nav > ul > li > ul > li > a { 
    max-width: 150px; 
    text-overflow: ellipsis; 
    overflow: hidden; 
}