The value of the previously used display property will only be used inline or block, the two values are displayed as follows:
(1) Inline: The Display:inline is set, the element of the attribute is not wrapped, and even if the element is set to a wide height and has no effect, belonging to the inline element, a typical inline element has <span> <a> <label , <input>, , <strong> and <em>
(2) Block: Set the Display:block; the element of the property will be wrapped automatically, and can be set to a high width, belonging to block-level elements, the typical block element is: <div>, <p>,
Example:
<style>
Ul{list-style:none;}
Li{display:inline;width:200px;height:30px;text-align:center;line-height:30px;background: #ccc;}
</style>
<body>
<ul>
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
</ul>
</body>
Implementation results:
As you can see, even though we have set the corresponding width and height for each Li element, the effect of the display is still the background color, which is just the widths and heights of the words within the LI element
If you change it to Display:block, the effect is as follows:
By default, Inline-block behaves like inline, and only shows the difference when the element is set to a width and height.
But here, the story does not end:
Some popular browsers now support Inline-block, but Ie6&7 does not support it, but using display:inline-block will trigger layoutunder IE , This allows the inline element to have a Display:inline-block attribute of the table disease . Setting the display:inline-block property on a block element does not achieve the inline-block effect. At this point the block element is simply triggered by the display:inline-block layout, and it is the row layouts, so after the trigger, the block element is still the row layout, but not as Opera The middle block element is presented as an inline object.
Solution (1):
Ul{list-style:none;}
Li{display:inline-block;width:200px;height:30px;text-align:center;line-height:30px;background: #ccc; border:1px solid black;}
Li{display:inline;}
That is set two times, this hack is only for IE7 the following versions.
Solution (2):
Ul{list-style:none;}
Li{display:inline;zoom:1;width:200px;height:30px;text-align:center;line-height:30px;background: #ccc; border:1px solid black;}
This is also for IE7 and the following versions
Display of the Inline,block,inline-block
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
