css - 显示 :inline is set. 时边距、位置和填充不起作用，相对位置的行为也很奇怪

Question

我有两个 CSS 类:

.class1 {
    height: 100%;
    width: 300px;
    border: 1px none #B0B0B0;
    position: relative;
    display: inline;
    left: 10px;
}
.class2 {
    height: 100%;
    width: 200px;
    position: relative;
    display: inline;
    margin-left: 15px;
    background-color: #00CCCC;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
}

现在，如您所见，它们都设置为显示在一行中(元素之间没有换行符)。哪个工作正常。但出于某种原因，自从我将显示设置为内联后，Padding、Positioning 和 Margin CSS 都停止工作了。我可以添加一个 margin-left 10inches 并且什么也不会发生。与填充和定位相同。

谁能解释一下如何解决这个问题？

此外，我在两个类上都设置了相对位置，但是在浏览器中查看页面时，.class2 超过 .class1 应该只是在 .class1 之后。

有什么想法吗？

编辑:

好吧，我已经做了一个 JSFiddle，但它似乎在那里玩得更多......

看起来 Width 不起作用....

这里是:

http://jsfiddle.net/zYbwh/1/

Answer 1

你需要使用

display: inline-block;

相反。 margin 不适用于 display: inline 元素，但是 inline-block 可以。然后，您可以拥有一个带有边距和显式宽度/高度的内联元素。

要使其在 IE7 中工作，请添加以下两行:

*display: inline;
zoom: 1;

这很糟糕，但它确实有效。