子元素自动宽度（大于父元素）

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; 
}