UL佔用全寬而沒有設置寬度

我希望UL的寬度匹配li中最長的文本，但是如果我沒有爲我的ul設置寬度（目前爲28.5％），它只需佔用100％。嘗試使用最大寬度，但也失敗了。UL佔用全寬而沒有設置寬度

代碼：

<ul class="nav-shop"> 
      <li class="nav-shop-sub"> 
        <a href="mylink">Link</a> 
        </li> 

      <li class="nav-shop-sub"> 
        <a href="mylink">Link2</a> 
        </li> 
</ul>

CSS：

ul.nav-shop { 
    width: 28.5%; 
    background: #15a2e7; 
    min-height: 38em; 
    margin: -11px; 
} 
li.nav-shop-sub { 
    padding-left: .83333em; 
    display: block; 
    float: left; 
    margin-top: 20px; 
    margin-bottom: -25px; 
    width: 96%; 
} 
li.nav-shop-sub:hover { 
    background: #f2f2f2!important; 
} 
li.nav-shop-sub:hover a { 
    color: #2980b9!important; 
} 
li.nav-shop-sub>a { 
    border-bottom: 1px dotted #999; 
    display: inline-block!important; 
    font-size: 1.1667em; 
    line-height: 1.429; 
    margin: -1px; 
    padding: .42857em .28571em .57143em!important; 
    position: relative!important; 
    width: 100%; 
    color: #ffffff!important; 
} 
div.grid.nav-shop-wrapper.has-product-noms::before, ul.grid-item.list-stacked.link-list::before { 
    display: table; 
    content: ""; 
} 
ul.grid-item.list-stacked.link-list::after, div.grid.nav-shop-wrapper.has-product-noms::after { 
    clear: both; 
    display: table; 
    content: ""; 
}

注意，這是原來的CSS。嘗試刪除寬度的所有提到，但同樣的事情發生。

來源

2015-01-08 user4349555

是的，ul是一個塊級元素，因此它佔用全部寬度。如果你想指定元素寬度，你可以使用內聯塊。

來源

2015-01-08 09:08:46

我不想設置寬度 – user4349555

是的，你不需要設置寬度，只需設置display：inline-block .... –

仍然滿足其容器的100％ – user4349555

必須設置規則顯示在UL

display: inline-block;

來源

2015-01-08 09:09:57

仍然滿足它的100％容器 – user4349555

檢查jsfiddle - http://jsfiddle.net/y9Lf87zm/ –

複製你使用的CSS和我有同樣的問題... – user4349555

刪除

width: 28.5%;

，並添加

display: inline-block;

到

ul.nav-shop {

來源

2015-01-08 09:10:09

仍然滿足其容器的100％ – user4349555

它不，持有 http://jsfiddle.net/xtrabhwh/1/ –

它在我的頁面上.. – user4349555

您可以使用

display: inline-block,

但這個屬性可以有一段時間的原因間距在頁面底部。

所以，你可以使用

float: left

補償。

來源

2015-01-08 09:18:24

UL佔用全寬而沒有設置寬度

回答

相關問題