How to achieve horizontal arrangement of ul and li in css

Because li is a block-level element and occupies one line by default. To achieve horizontal arrangement, the following two methods are generally used:

float:left

There is a problem with this setting. After li is floated, it is separated from the text flow, that is, it does not occupy any position. If its parent element has a specific style and does not have a fixed width and height, it is recommended that the parent element clear its float or set a fixed width and height.

display:inline-block

That is to say, turning li into an inline element and setting the width, height and margins also has a problem. Lower versions of Ie browsers are not compatible with inline-block. It is recommended to add two attributes after it for compatibility. Low version ie

(recommended tutorial:CSS introductory tutorial)

*display:inline; *zoom:1;

    
  
 
 
superbirds
 
superbirds
 
superbirds
 
superbirds
 
 
  

css code one:

* { margin: 0; border: 0; padding: 0; font-size: 13pt; } #nav { height: 40px; border-top: #060 2px solid; border-bottom: #060 2px solid; background-color: #690; } #nav ul { list-style: none; margin-left: 50px; } #nav li { display: inline; line-height: 40px; float:left } #nav a { color: #fff; text-decoration: none; padding: 20px 20px; } #nav a:hover { background-color: #060; }

css code two:

* { margin: 0; border: 0; padding: 0; font-size: 13pt; } #nav { height: 40px; border-top: #060 2px solid; margin-top: 100px; border-bottom: #060 2px solid; background-color: #690; } #nav ul { list-style: none; line-height: 40px; margin-left: 50px; } #nav li { display: block; float: left; } #nav a { display: block; color: #fff; text-decoration: none; padding: 0 20px; } #nav a:hover { background-color: #060; }

Recommended related video tutorials:css video tutorial

The above is the detailed content of How to achieve horizontal arrangement of ul and li in css. For more information, please follow other related articles on the PHP Chinese website!