我有两个 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
不起作用....
这里是:
最佳答案
你需要使用
display: inline-block;
相反。 margin
不适用于 display: inline
元素,但是 inline-block
可以。然后,您可以拥有一个带有边距和显式宽度/高度的内联元素。
要使其在 IE7 中工作,请添加以下两行:
*display: inline;
zoom: 1;
这很糟糕,但它确实有效。
关于css - 显示 :inline is set. 时边距、位置和填充不起作用,相对位置的行为也很奇怪,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8782634/