设置display:inline时，边距、位置和填充不起作用.还有相对位置的怪异行为

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;

这很可怕，但它有效。

Answer 2

我知道这是一个很晚的答案，但我写了一个jQuery插件，它支持在内联元素上填充（带分词）

http://jsfiddle.net/RxKek/

插件代码：

$.fn.outerHTML = function () {
// IE, Chrome & Safari will comply with the non-standard outerHTML, all others (FF) will have a fall-back for cloning
return (!this.length) ? this : (this[0].outerHTML || (
    function (el) {
        var div = document.createElement('div');
        div.appendChild(el.cloneNode(true));
        var contents = div.innerHTML;
        div = null;
        return contents;
    })(this[0]));

}；

/*
Requirements:
1. The container must NOT have a width!
2. The element needs to be formatted like this:
<div>text</div>
in stead of this:
<div>
    text
</div>
*/
$.fn.fixInlineText = function (opt) {
return this.each(function () {
    //First get the container width
    var maxWidth = opt.width;
    //Then get the width of the inline element
    //To calculate the correct width the element needs to 
    //be 100% visible that's why we make it absolute first.
    //We also do this to the container.
    $(this).css("position", "absolute");
    $(this).parent().css("position", "absolute").css("width", "200%");
    var width = $(this).width();
    $(this).css("position", "");
    $(this).parent().css("position", "").css("width", "");
    //Don't do anything if it fits
    if (width < maxWidth) {
        return;
    }
    //Check how many times the container fits within the box
    var times = Math.ceil(width / maxWidth);
    //Function for cleaning chunks
    var cleanChunk = function (chunk) {
        var thisChunkLength = chunk.length - 1;
        if (chunk[0] == " ") chunk = chunk.substring(1);
        if (chunk[thisChunkLength] == " ") chunk = chunk.substring(0, thisChunkLength);
        return chunk;
    };
    //Divide the text into chunks
    var text = $(this).html();
    var textArr = text.split(" ");
    var chunkLength = Math.ceil((textArr.length - 1) / times);
    var chunks = [];
    var curChunk = "";
    var curChunkCount = 0;
    var isParsingHtml = false;
    //Loop through the text array and split it into chunks
    for (var i in textArr) {
        //When we are parsing HTML we don't want to count the
        //spaces since the user doesn't see it.
        if (isParsingHtml) {
            //Check for a HTML end tag
            if (/</[a-zA-Z]*>/.test(textArr[i]) || /[a-zA-Z]*>/.test(textArr[i])) {
                isParsingHtml = false;
            }
        } else {
            //Check for a HTML begin tag
            if (/<[a-zA-Z]*/.test(textArr[i])) {
                isParsingHtml = true;
            }
        }
        //Calculate chunks
        if (curChunkCount == (chunkLength - 1) && !isParsingHtml) {
            curChunk += textArr[i] + " ";
            chunks.push(cleanChunk(curChunk));
            curChunk = "";
            curChunkCount = -1;
        } else if ((i == (textArr.length - 1))) {
            curChunk += textArr[i];
            chunks.push(cleanChunk(curChunk));
            break;
        } else {
            curChunk += textArr[i] + " ";
        }
        if (!isParsingHtml) {
            curChunkCount++;
        }
    }
    //Convert chunks to new elements
    var el = $($(this).html("").outerHTML());
    for (var x in chunks) {
        var new_el = el.clone().html(chunks[x]).addClass("text-render-el");
        var new_el_container = $("<div/>").addClass("text-render-container");
        new_el_container.append(new_el);
        $(this).before(new_el_container);
    }
    //Finally remove the current element
    $(this).remove();
});

}；

Answer 3

这就是使用模板时遇到的问题，我用php编程了一个网站，但设计让我很头疼。所以我试着给网页设计师们一些火箭燃料。

这就是我每一步都遇到的问题。。。内联块不适用于我，什么都不起作用，因为这不是我的设计，我不知道设置。

我试着自己做设计，但我没时间了，我昨天需要一个设计。

我建议你从模板中提取你需要的东西，并删除其他所有内容，这将解决你的问题，并节省你的时间。