显示时，边距，位置和填充不工作：inline设置。也从相对位置的奇怪行为 [英] Margin, position and padding not working when display:inline is set. also weird behaviour from relative position

问题描述

我有两个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，什么也不会发生。与填充和定位相同。

Now, as you can see, they're both set to display in a line (no line breaks in between elements). Which works correctly. But for some reason, ever since I set the display to inline, the Padding, the Positioning and the Margin CSS have all just stopped working. I can add a margin-left 10inches and nothing will happen. Same with padding and positioning.

任何人都可以解释如何解决这个问题？

Can anyone explain how to fix this?

但在浏览器中查看页面时， .class2 over laps .class1 是 .class1 之后。

Also, I have the relative position set on both classes, yet when viewing the page in a browser, .class2 over laps .class1 when its supposed to be just after .class1.

任何想法吗？

EDIT ：

好吧，所以我做了一个JSFiddle，但它似乎正在播放更多...

Okay, so I've done a JSFiddle, but it seems to be playing up even more there....

看起来像宽度无效....

Looks like the Width is not working....

这里是：

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

推荐答案

您必须使用

display: inline-block;

。 margin 不能使用 display：inline 元素，但是 inline-block 它。

instead. margin doesn't work with display: inline elements, however with inline-block it does. You can then have an inline element with margins and explicit widths/heights.

要在IE7中使用此工具，请添加以下两行：

To make this work in IE7, add these two lines:

*display: inline;
zoom: 1;

这太可怕了，但它工作。

It's horrible, but it works.

这篇关于显示时，边距，位置和填充不工作：inline设置。也从相对位置的奇怪行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！