我只是做了一个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

相关问题