我只是做了一個UL列表中有4種LI元素和我在CSS中這樣做：按鍵寬度問題

ul li { 
width:200px;/*problem*/ 
display:inline; 
color:white; 
background-color:red; 
border-radius:5px; 
font-family:verdana; 
font-size:2em; 
box-shadow:0 7px 0 #600; 
padding:5px 20px; 
margin:15px; 
}

的問題是，width屬性與li元素的寬度不influency，如果我想做的更大我必須添加填充左右，但這並不好，因爲在每個框中有不同的長度，因爲有些字母比其他字母多。

這是爲什麼發生？

謝謝，

來源

2013-08-27 Burnsed

'顯示：inline-block的;' –

什麼我上面的人說^如果你想要使用的盒模型分配之類的東西寬度和填充正常，你需要使用用它'如果你希望它顯示爲一個正確的塊元素，則顯示：inline-block（如果你想內聯）或者display：block。 –

爲了設置block型性能（即寬度），就必須設置display到inline-block所述li元件

ul li { 
    display:inline-block; 
}

上的選擇器的上方只會影響li元件。如果您想要設置子元素的樣式，例如按鈕，則還必須在其中設置width屬性。

ul li button { 
    width:200px; 
}

fiddle

來源

2013-08-27 19:52:49 KyleMit

所有HTML元素以下列方式之一呈現：

塊：佔用可用的全寬，或限定的寬度，用一個新行之前之後。這可以通過使用display:block;
內嵌被迫：只佔用盡可能多的寬度，因爲它需要的基礎上，其內容，而不會強制新生產線。這可以通過使用display:inline;
不顯示被強制：一些標記，如<meta />，<style>和<link>是不可見的。這可以使用display:none;

內聯元素不能有一個定義的寬度。只有塊元素可以做到這一點。有一種方法可以通過使用display: inline-block來使塊級元素內聯。這很像一個表情符號或圖像將顯示在一個單詞文檔中。你可以定義一個寬度，因爲它是一個塊，但是如果沒有設置寬度，它將與其餘的元素一致。內嵌塊不會考慮線高度，這意味着如果圖像與文本內嵌，則會調整線高以允許自己適合內嵌。

來源

2013-08-27 19:48:04

非常感謝。我每天都在學習很多東西。 – Burnsed

你已經簡化了一些。允許顯示的值包括：none，block，inline，inline-block，list-item，marker，run-in，compact，table，inline-table，table-row-group，table-column，table-column-group ，table-row，table-cell，table-caption。這是來自FF的列表，不包括所有-moz- *值。 – fred02138

是的，這是真的。儘管理論上所有元素都可以被認爲是塊，內聯或隱藏的。其他'display'值只是將僞屬性添加到元素。 'display：table'充當具有匹配表的僞屬性的塊級表。這就是爲什麼有'display：inline-table'屬性。 'run-in'的值只是一個僞狀態顯示屬性，允許元素根據其繼承狀態作爲塊或內聯行使。查看規範顯示，每個值都提到是阻止，內聯還是隱藏http://www.w3.org/wiki/CSS/Properties/display –

您應該使用display: inline-block不display: block;

DEMO http://jsfiddle.net/kevinPHPkevin/SyBBu/

ul li { 
width:200px;/*problem*/ 
display:inline-block; 
color:white; 
background-color:red; 
border-radius:5px; 
font-family:verdana; 
font-size:2em; 
box-shadow:0 7px 0 #600; 
padding:5px 20px; 
margin:15px; 
}

來源

2013-08-27 19:49:36 Vector

既然你問爲什麼這種情況正在發生 - 內聯元素的寬度由它們的內容決定讓你的寬度CSS沒有效果。將項目設置爲inline-block或block將使其根據您的樣式而不是內容確定其寬度。

來源

2013-08-27 19:49:47 quoo

按鍵寬度問題

回答

fiddle

相關問題