CSS floating issue being pushed to new line

问题

Please see my jsfiddle example below.

Can anyone figure out what I am doing wrong here?

I am attempting to use a third party plugin called Smart Wizard it all works except for this one aspect as shown in the jsfiddle.

The [X] is on a new line, it should be directly to the right of the error message.

http://jsfiddle.net/jamesjw007/4wJv4/1/

回答1:

just add

.content { width: 90%; float: left; }

example fiddle: http://jsfiddle.net/4wJv4/9/ - Adjust the width of content element as you prefer

回答2:

Try adding this to the Stylesheet.. It worked..

.swMain .msgBox .close {
    float: left;
}

You have to float all the elements to the Left in the same tag to get the elements to be in One line.

Just the "float" will do..

回答3:

You need to float the content div as well as the close icon. In addition to this, you might want to float the close button to the right of the message box as opposed to immediately after the text.

.swMain .msgBox .content { float:left; width:auto; }
.swMain .msgBox .close { float: right; }

I've updated your fiddle with these changes - http://jsfiddle.net/4wJv4/19/

来源：https://stackoverflow.com/questions/10248306/css-floating-issue-being-pushed-to-new-line