3

我刚刚做了一个包含 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 元素的宽度没有影响，如果我想做得更大，我必须在左右两侧添加填充，但这并不好，因为每个盒子都有不同的长度，因为有些字母比其他字母多。

为什么会这样？

谢谢，

4

4 回答 4

1

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

  • 块：占据可用的全部宽度，或定义的宽度，前后有一个新行。这可以强制使用display:block;

  • 内联：根据其内容仅占用所需的宽度，并且不强制换行。这可以强制使用display:inline;

  • 不显示：一些标签，如<meta />和<style>不<link>可见。这可以强制使用display:none;

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

于 2013-08-27T19:48:04.863 回答
1

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

于 2013-08-27T19:49:47.850 回答
1

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

ul li {
    display:inline-block;
}

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

ul li button {
    width:200px;
}

小提琴

于 2013-08-27T19:52:49.440 回答
0

display: inline-block你不应该使用display: block;

演示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-27T19:49:36.197 回答