CSS ul li horizontal horizontal

 We often use ul li project tags in articles , like the "Related Topics Research" in this article is made using HTML ul li project tags , and the default presentation effect of ul li is vertical arrangement, if you want to modify it to horizontal horizontal arrangement must use CSS 's display inline syntax, this way are supported in all major browsers, in order to be able to clearly see the effects of the operation of the program, divided into the following CSS 's display inline with ul li two parts to explain, then Combining the two grammars together, you can see the horizontal and horizontal presentation of ul li.

CSS display inline syntax

<style type="text/css">
<!--
#B ul li {
　display:inline;
}
-->
</style>

The purpose of #B in the example is to control the ul li tag in the second DIV block (<div id="B"></div>) below . If #B is not written, all ul in the entire web page The li tag will follow the display inline syntax command under CSS to show the horizontal and horizontal arrangement effect. For details, please refer to: CSS display inline . HTML ul li project tag

<div id="A">
<b>Preset style</b>
<ul>
　<li>This is item one</li>
　<li>This is item two</li>
</ul>
</div >
<div id="B">
<b>Horizontal and horizontal rendering</b>
<ul>
　<li>Here is item one</li>
　<li>Here is item two</li>
</ul>
</ div>

In this part, two large DIV blocks are prepared , namely <div id="A"> and <div id="B">. The A block is used to display the ul li project tag pre- modified without display inline . Set the style, B block is used to display the horizontal and horizontal rendering effect modified by display inline . For standard usage of ul li , please refer to: HTML ul li project tag .

The above two paragraphs of grammar are combined together and written in the same HTML file. The results are as follows

Default style
　●Here is item one
　●Here is item two
horizontally presented
　Here is item one Here is item two

From the rendering results, it can be found that the ● symbol preset by ul li in the vertical display disappears after the display inline is modified to be displayed horizontally and horizontally. This feature makes it easier for us to make various bullets. beautiful menu, such as a border (for each li border ), plus hyperlinks , and even add background pictures.