Margin, position and padding not working when display:inline is set. also weird behaviour from relative position

问题

I have two CSS classes:

.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;
}

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?

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.

Any ideas?

EDIT:

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

Looks like the Width is not working....

here it is:

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

回答1:

You need to use

display: 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.

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

*display: inline;
zoom: 1;

It's horrible, but it works.

回答2:

I know this is quite a late answer but I wrote a jQuery plugin which support padding on inline elements (with word breaking) see this JSfiddle:

http://jsfiddle.net/RxKek/

Plugin Code:

$.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();
});

};

回答3:

Thats the problem you get when using templates, ive programmed a site in php, but the design is killing me. So i try'd some rocket fuel for webdesigners.

And this is the problems i keep getting every step of the way... Inline-block does not work for me, nothing works, becouse it is not my design and i dont know the setup.

Ive tryd doing the design myself, but i am out of time, i need a design yesterday.

I suggest you take what u need from the templates and delete everything else, that will schrink your problem, and save you time.

来源：https://stackoverflow.com/questions/8782634/margin-position-and-padding-not-working-when-displayinline-is-set-also-weird