显示时,边距,位置和填充不起作用:设置了内联.相对位置也有奇怪的行为

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都停止了工作.我可以添加一个保证金左10英寸,什么都不会发生.与填充和定位相同.

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

此外,我在两个类上都设置了相对位置,但是当在浏览器中查看页面时,在它应该只是之后的.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;

这太可怕了,但确实有效.