如何设置内联元素的宽度？

Question

我有这个css：

.test {
    background-color:#00ff00;
    display: inline;    
    width: 200px;
}

<div class="test">test1</div>
<div class="test">test2</div>

但似乎没有读取宽度。如何更改CSS？ 感谢

Answer 1

inline项目不能具有明确设置的宽度。请改用inline-block。

.test {
    background-color:#00ff00;
    display: inline-block;
    width: 200px;
}

请注意，IE 6/7与inline-block存在兼容性问题，默认情况下它不适用于块级别的元素。这些问题can be resolved。

Answer 2

我们无法为inline设置宽度。 但是，如果我们使用inline-block，则无法将子元素放在一行中 因此，请使用inline-table。 这是我测试过的风格

.test {
    background-color:#00ff00;
    display: inline-table;
    width: 200px;
}

我已经检查过了。使用display:inline-table。 效果很好。