Can inline elements contain block elements?
Can an inline element contain a block element for instance: can a list have a paragraph?
-
Leaving aside the fact that LI and P are both block level ...
It's never valid to do so, but in behavioural terms, sometimes you can nest a block level element inside a inline level one, but it depends on the browser parser.
For example, in FireFox 3.x, with this markup
<!DOCTYPE html> <i> foo <div>bar</div> baz </i>will display foo, bar, and baz all in italics.
But this markup, replacing the inline element
<i>with inline element<var>(which also has italics as its default rendering)<!DOCTYPE html> <var> foo <div>bar</div> baz </var>will only display foo in italics.
JSFiddle for this
Other browsers do not behave the same. Which is one reason why you should stick to using valid markup.
讨论(0) -
It's incorrect markup to use a block element within an inline one. It may still render if the browser and Doctype are lenient, but it's not valid.
You can usee CSS, however, as discussed here.
讨论(0) -
It can, but it won't pass validation. There are ways round it that have been thoroughly discussed here: Is it wrong to change a block element to inline with CSS if it contains another block element?
讨论(0) -
If you want block elements to behave like inline elements, set the display property to
inline-block. If you need to support IE 7 or 6, for the same elements in your IE stylesheet, add these two rules:zoom:1; display:inline.讨论(0) -
block-level elements cannot descend from inline-level elements
Eric Meyer book "CSS The dfinitive Guid" page 9
讨论(0) -
Inline element can't contain block element and block element can contain all kind of. <li> , that you've mentioned, is not an inline element it's a block element as <p> , so both can contain each others
讨论(0)
加载中...
- 热议问题