Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Ausführliche Grafik- und Texterklärung zur horizontalen Anordnung der li-Elemente in ul (mit Code)

yulia
Freigeben: 2018-09-25 11:04:08
Original
42363 Leute haben es durchsucht

在页面布局时,我们经常会用到li标签,因为li标签用途很广泛,它可以用来制作列表,选项卡,导航等等。但是

    标签里的li默认情况下是纵向排列的,那我们可不可以让li横向排列呢?这篇文章就给大家介绍两种方法,来实现HTML中ul列表横向排列。有需要的朋友可以参考一下,希望对你有用。

    ul列表的横向排列在导航中用得比较多,接下来就通过横向导航实例来讲讲如何用CSS让ul横向排列。

    注意:

    1、li列表前面默认有小圆点,有时候为了美观需要去掉多余的小圆点,可以使用CSS中的list-style:none这个属性,当然也可以在列表前面加一些图片。

    2、为了让页面更具有吸引力,导航一般都会用到伪类元素,最常见的就是hover,它可以实现鼠标经过导航时,改变导航的背景颜色,字体大小,图片等等。

    3、巧妙使用CSS中的display属性。如果需要让li具有高度和宽度,并且需要调节菜单内容的位置,必须将display属性值设置为block,将其变成块级元素后,padding,text-align等属性才起作用。     

    一、display:inline 实现ul横向排列

    用ul li做一个横向导航,实现鼠标经过时,背景颜色改变。代码如下:

    HTML部分:

    <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>
    Nach dem Login kopieren

    CSS部分:

    <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>
    Nach dem Login kopieren

    效果图:

    Ausführliche Grafik- und Texterklärung zur horizontalen Anordnung der li-Elemente in ul (mit Code)

    鼠标经过的效果:

    Ausführliche Grafik- und Texterklärung zur horizontalen Anordnung der li-Elemente in ul (mit Code)

    二、float:left 实现ul横向排列

    用float:left 实现ul横向排列,li浮动以后会脱离标准流,且不占位置,如果它的父级元素有具体的样式且没有固定宽高,还需要对父元素清除浮动,或者设置固定宽高。HTML部分和上面一样,CSS部分如下所示:

    <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>
    Nach dem Login kopieren

    效果和上面一样,只是方法不一样。

    总结:float:left和display:inline都可以实现ul li横向排列,具体选择什么方法,看个人习惯和项目需要吧,初学者可以自己动手尝试,希望可以帮助到你。

Das obige ist der detaillierte Inhalt vonAusführliche Grafik- und Texterklärung zur horizontalen Anordnung der li-Elemente in ul (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage