|
導讀網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立... 網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言,是因為文本中包含了所謂“超級鏈接”點。 在頁面布局時,我們經常會用到li標簽,因為li標簽用途很廣泛,它可以用來制作列表,選項卡,導航等等。但是<ul>標簽里的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> 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>效果圖:
鼠標經過的效果:
二、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>效果和上面一樣,只是方法不一樣。 總結:float:left和display:inline都可以實現ul li橫向排列,具體選擇什么方法,看個人習慣和項目需要吧,初學者可以自己動手嘗試,希望可以幫助到你。 以上就是圖文詳解如何讓ul中的li元素橫向排列(附代碼)的詳細內容,更多請關注php中文網其它相關文章! 網站建設是一個廣義的術語,涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。 |
溫馨提示:喜歡本站的話,請收藏一下本站!