CSS3製成薄UL裝修公司裏

假設以下HTML5文檔：CSS3製成薄UL裝修公司裏

<!doctype html> 
<html> 
<head><title>try</title> 
</head> 
<body> 
    <h1>testing</h1> 
    <ul id='ul_id'> 
    <li id='li1_id'>one</li> 
    <li id='li2_id'>somelongertwo</li> 
    </ul> 
</body></html>

這將是CSS3樣式表使<ul id='ul_id'>元素的寬度將是最小的，以適應，所以會這裏的寬度爲<li id='li2_id'>加上它的子彈，因爲第二個列表項是<ul id='ul_id'>元素中最寬的一項？

我不希望我的<ul id='ul_id'>的寬度寬是因爲含<body>

背景和這個問題的動機是我optimizing (nearly minimizing) width of jqueryui menu問題。

來源

2016-01-12 Basile Starynkevitch

會是什麼CSS3樣式表使<ul id='ul_id'>元素的寬度將是最小的，以適應

您可以在ul元素的display更改爲inline-block。

這樣做，它將有一個基於子元素大小的"shrink-to-fit"寬度。

基於在正常流動inline-block元件相關規範的section 10.3.9：

width如果是auto，所使用的值是shrink-to-fit寬度爲浮動元件。

#ul_id { 
 
    display: inline-block; 
 
    background-color: #f00; 
 
}

<ul id='ul_id'> 
 
    <li id='li1_id'>one</li> 
 
    <li id='li2_id'>somelongertwo</li> 
 
</ul>

另外，設置display到table會導致類似的行爲。

來源

2016-01-12 20:58:58

#ul_id { 
    display: inline-block; 
}

或

#ul_id { 
    float: left; 
} 
#ul_id:after { 
    clear: both; 
}

一兩個應該正常工作。寬度調整大小以適應容器是由display: block行爲造成的，該行爲默認爲ul元素。

來源

2016-01-12 21:02:50 Green

CSS3製成薄UL裝修公司裏

回答

相關問題