Detailed graphic explanation on how to arrange the li elements in ul horizontally (with code)

In page layout, we often use the li tag, because the li tag is very versatile. It can be used to make lists, tabs, navigation, etc. But the li in the

tag is arranged vertically by default, so can we arrange the li horizontally? This article will introduce to you two methods to achieve horizontal arrangement of ul lists in HTML. Friends in need can refer to it, I hope it is useful to you.

The horizontal arrangement of ul lists is often used in navigation. Next, we will use a horizontal navigation example to talk about how to use CSS to arrange ul horizontally.

Note:

1. There are small dots in front of the li list by default. Sometimes you need to remove the redundant small dots for the sake of beauty. You can use list- in CSS. With the attribute style:none, you can of course add some pictures in front of the list.

2. In order to make the page more attractive, navigation generally uses pseudo-class elements. The most common one is hover, which can change the background color, font size, pictures, etc. of the navigation when the mouse passes over it. wait.

3. Cleverly use the display attribute in CSS. If you need to make the li have height and width and adjust the position of the menu content, you must set the display attribute value to block. After turning it into a block-level element, attributes such as padding and text-align will take effect.​

1. display:inline realizes the horizontal arrangement of ul

Use ul li to make a horizontal navigation, so that the background color changes when the mouse passes by. The code is as follows:

HTML part:

<ul id="nav">
		<li><a href="#">首页</a></li>
		<li><a href="#">课程介绍</a></li>
		<li><a href="#">师资力量</a></li>
		<li><a href="#">新闻动态</a></li>
		<li><a href="#">联系我们</a></li>	
	</ul>

CSS part:

<style type="text/css">			
	#nav {
	        margin: 50px auto;
	        height: 40px;
	         background-color: #690;
	      }			
	#nav ul {
		list-style: none;
		margin-left: 50px;
		}			
	#nav li {
		display: inline;			    
		}			
	#nav a {
		line-height: 40px;
		color: #fff;
		text-decoration: none;
		padding: 20px 20px;
		}			
	#nav a:hover {
		background-color: #060;
		}
</style>

Rendering:




The effect of the mouse passing over:



2. float: left to realize the horizontal arrangement of ul

Use float: left to realize the horizontal arrangement of ul. After li floats, it will break away from the standard flow and will not occupy any position. If its parent element has a specific style and does not have a fixed width and height, you need to clear the float of the parent element or set a fixed width and height. The HTML part is the same as above, and the CSS part is as follows:

<style type="text/css">
	#nav {
		height: 40px;
		margin-top: 50px;
		background-color: #690;
		}			
	#nav ul {
		list-style: none;			    
		margin-left: 50px;
		}			
	#nav li {
		display: block;
		float: left;
		}			
	#nav a {
		line-height: 40px;
		display: block;
		color: #fff;
		text-decoration: none;
		padding: 0 20px;
		}			
	#nav a:hover {
		background-color: #060;
		}
</style>

The effect is the same as above, but the method is different.

Summary: Both float:left and display:inline can realize the horizontal arrangement of ul li. The specific method to choose depends on personal habits and project needs. Beginners can try it by themselves. I hope it can help you.

The above is the detailed content of Detailed graphic explanation on how to arrange the li elements in ul horizontally (with code). For more information, please follow other related articles on the PHP Chinese website!