CSS uses float to make ul li horizontal

 Not long ago, I introduced a " CSS ul li horizontal level " design method. The technique used is CSS display inline level presentation syntax, which is a relatively easy standard method. This article will introduce another CSS production ul li horizontal level technique. , Use the built-in CSS feature of float ( float ) to make each li item float horizontally. Although horizontal and horizontal effects can be achieved, there is a little difference between the use of float and display inline . See the example for a clearer view .

CSS uses float to make ul li horizontal horizontal example 1. The difference between float and display inline

<style type="text/css">
<!--
#A ul li {
    float:left;
}
#B ul li {
    display:inline;
}
-->
</style>
<div id="A">
< ul>
　<li>This is project one</li>
　<li>This is project two</li>
</ul>
</div>
<div id="B">
<ul>
　<li>This is project one </li>
　<li>This is project two</li>
</ul>
</div>

The output of the above example

●Here is item one ●Here is item two
　Here is item oneHere is item two

From the output result of the example, you can see that the horizontal effect produced by the float syntax in the first line , the "●" symbol in front of the two li items has not disappeared, and they are connected to the left. In some browser environments Down, there may even be overlapping symbols. In the second line, through the horizontal effect of display inline , the "●" symbol in front of the two li items disappears completely, and there is also a gap between the two items, which looks clearer. In spite of this, it cannot be fully explained whether it is better to use display inline or float . For example, using float can easily set the width of each item, for example, set the width of each li to 200px, just add it to the CSS syntax "Width:200px;" is fine, this way of setting the width has no effect in the display inline ! Then let's look at the horizontal effect of adding width li.

CSS uses float to make ul li horizontal and horizontal example 2. Add width to each li

<style type="text/css">
<!--
ul li {
    border:1px #cccccc solid;
    width: 200px;
    float:left;
}
-->
</style>
<ul>
　<li>Here is item one </li>
　<li>This is project two</li>
</ul>

The output result is as

• Here is project one
• Here is project two

In order to be able to clearly show the visual effect of the width, we have added the effect of a border ( CSS border ) in the example , that is, the border part in the syntax , width:200px is to set the width of each li item to 200px, if you need Adding the effect of width to each item, using float is easier than displaying inline .