fiddle

Question

我刚刚做了一个包含4个LI元素的UL列表，我在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元素的宽度没有影响，如果我想做得更大，我必须在左右添加填充但这不好，因为有不同的长度因为有些人比其他人有更多的信件，所以每个方框都有。

为什么会这样？

谢谢，

Answer 1

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

阻止：使用前后的新行占用可用的全宽或定义的宽度。可以使用display:block;
内联：根据其内容，仅占用所需的宽度，并且不会强制换行。可以使用display:inline;
未显示：某些标记（例如<meta />，<style>和<link>不可见。可以使用display:none;

内联元素不能具有已定义的宽度。只有块元素可以做到这一点。有一种方法可以使用display: inline-block使块级元素内联。这很像表情符号或图像将显示在word文档中。您可以定义宽度，因为它是一个块，但如果没有设置宽度，它将与其余元素内联。内联块不会考虑行高，这意味着如果图像与文本内联，则会调整行高以允许自身适合内联。

Answer 2

由于您要求为什么发生这种情况 - 内联元素的宽度由其内容决定，因此宽度css无效。将项目设置为inline-block或block将使其根据您的样式而不是内容来确定其宽度。

Answer 3

要设置block类型属性（即宽度），您必须在display元素上将inline-block设置为li

ul li {
    display:inline-block;
}

上面的选择器只会影响li元素。如果要设置子元素的样式，例如按钮，则还必须在那里设置width属性。

ul li button {
    width:200px;
}

fiddle

Answer 4

您应该使用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;
}

按钮宽度问题

4 个答案:

fiddle