ul>李風格，並保持在一條線內

我想創建一個菜單列表項有4個項目，但它不會在一行內出於某種原因饋送。我試圖用嵌套的div嵌套它，但沒有運氣。當我添加padding: 10px;時，問題開始發生。ul>李風格，並保持在一條線內

下面是最新的HTML和CSS我有：

HTML：

<div id="header"> 
    <ul id="menu"> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Info</a></li> 
     <li><a href="#">Contact</a></li> 
    </ul> 
</div>

CSS：

#menu { 
    margin: 0; 
    padding: 0; 
} 

#menu li { 
    display: block; 
    float: left; 
    margin: 0; 
    width: 25%; 
    background-color: gray; 
    padding: 10px; 
}

我也有一個的jsfiddle：http://jsfiddle.net/GLh92/1/

由於你可以看到，它不適合在一條線內。我在這裏也有一個迴應問題。所以，它需要適合不同的屏幕分辨率。

任何想法如何以乾淨的方式做到這一點？

來源

2013-03-19 tugberk

爲一體，閉上你的錨標籤.. – kingkode 2013-03-19 19:03:06

@McMastermind這是一個錯字錯。固定。 – tugberk 2013-03-20 07:53:04

使用box-sizing: border-box在li元素。這將使寬度計算的填充部分成爲可能。

http://jsfiddle.net/ExplosionPIlls/GLh92/5/

來源

2013-03-19 19:04:13

這種情況怎麼樣？ http://jsfiddle.net/GLh92/365/ 任何方式保持在同一行？ – Max 2016-07-15 12:46:45

填充爲您的元素添加寬度和/或高度，您應該處理元素的子元素的填充或邊距。

來源

2013-03-19 19:03:57 Gabor

看看盒子大小的CSS屬性，它會改變你的生活。

#menu li { 
    display: inline-block; 
    float: left; 
    margin: 0; 
    width: 25%; 
    background-color: gray; 
    padding: 10px; 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box;   /* Opera/IE 8+ */ 
}

來源

2013-03-19 19:04:12

當你提到padding:10px;它也增加了<li>項目的寬度。所以，你需要採取的width:20%;

護理試試這個：

#menu li { 
    display: block; 
    float: left; 
    margin: 0; 
    width: 20%; 
    background-color: gray; 
    padding:10px; 
}

它將來自同一線下。這是你在找什麼？

來源

2013-03-19 19:04:42

@Axel對於你的概率也有不同的解決方案。 – 2013-03-20 05:30:32

解決的辦法是將填充添加到<a>標記，而不是<li>標記，因爲填充會增加實際寬度。

刪除填充從<li>
添加padding: 10px;到<a>
閉上你的<a>標籤

http://jsfiddle.net/GLh92/7/

HTML：

<div id="header"> 
    <ul id="menu"> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Info</a></li> 
     <li><a href="#">Contact</a></li> 
    </ul> 
</div>

CSS：

#menu { 
    margin: 0; 
    padding: 0; 
} 

#menu li { 
    display: block; 
    float: left; 
    margin: 0; 
    width: 25%; 
    background-color: gray; 
} 

#menu li a { 
    display: block; 
    padding: 10px; 
}

來源

2013-03-19 19:05:44 Axel

的問題是，你是寬度設定爲25％至每個li元素的。（25 * 4 = 100）但是當你添加填充時，其中一個元素移動到下一行。（25 * 4 + 10（padding）> 100）你有四個列表元素，只要沒有填充（25 * 4 = 100）

變化幅度別的東西線值15％

#menu li { 
display: inline-block; 
float: left; 
margin: 0; 
width: 15%; 
background-color: gray; 
padding: 10px;

}

http://jsfiddle.net/GLh92/9/

來源

2013-03-19 19:07:22 Tomarinator

謝謝，但這不是解決方案。我想完全用4個項目來填充這一行，並且我也想讓它響應不同的屏幕分辨率。看到接受的答案。 – tugberk 2013-03-20 07:52:31

ul>李風格，並保持在一條線內

回答

相關問題