Why wont divs sit inline
I read up on inline positioning:
http://www.webdesignfromscratch.com/html-css/css-block-and-inline/
And then I created a test page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style type="text/css">
p {display:inline}
.inline
{
display:inline;
}
</style>
<div style="display:inline;">
<p>Hello</p>
<p>Pete</p>
</div>
<div class="inline">
<div>Hello</div>
<div>Pete</div>
</div>
<div class="inline">
<p>Hello</p>
<p>Pete</p>
</div>
</form>
However when I view the page I the middle two divs are not inline, they are one after the other.
What I dont undestand is why the second two elements arent displayed inline? I mean they shouldn't be according to the article. Paragraph and Divs are both block level so why are only the paragraph eleme开发者_StackOverflownts going 'inline'?
Any help much appreciated.
Pete
The divs in the second div do not have the class inline and hence are not inline elements. If you change your CSS definition to this:
div, p {display:inline}
Then everything will sit nicely on one line.
You are defying the very purpose of divs. If you want to use inline elements, a better options would be to go for <span> elements.
If you want you divs to appear side-by-side, you shoud use float. for example float:left each div.
<div> tags by their nature are block level elements. Unless you specifically say so in your CSS rules, they will remain so.
You have two options here.
Write a CSS rule that matches each div inside a bounding div with a class of inline. e.g.
.inline div {display:inline}
But I'd advise against this.
Best option is to apply the class inline, as you have already written to each div you want to display inline. e.g.
.inline {display:inline}
The bonus of this method is that you can apply this class to any element, rather than having to specify a new rule for each html element you want displayed inline.
As an aside - you should perhaps try using floats instead of displaying your divs inline. You may run into display and position issue going forward, depending how much information goes into your inline styled divs.
You need to put the class on the inner divs:
<div class="inline">Hello</div>
<div class="inline">Pete</div>
加载中,请稍侯......
精彩评论