html ul li橫向排列(HTML怎么讓ul中的li元素橫向排列)

注意:

1、li列表前面默認有小圓點,有時候為了美觀需要去掉多余的小圓點,可以使用CSS中的list-style:none這個屬性,當然也可以在列表前面加一些圖片。

2、為了讓頁面更具有吸引力,導航一般都會用到偽類元素,最常見的就是hover,它可以實現鼠標經過導航時,改變導航的背景顏色,字體大小,圖片等等。

3、巧妙使用CSS中的display屬性。如果需要讓li具有高度和寬度,并且需要調節菜單內容的位置,必須將display屬性值設置為block,將其變成塊級元素后,padding,text-align等屬性才起作用。

一、display:inline實現ul橫向排列

用ulli做一個橫向導航,實現鼠標經過時,背景顏色改變。代碼如下:

HTML部分:

<ulid="nav">

<li>首頁</li>

<li>課程介紹</li>

<li>師資力量</li>

<li>新聞動態</li>

<li>聯系我們</li>

</ul>

CSS部分:

<styletype="text/css">

#nav{

margin:50pxauto;

height:40px;

background-color:#690;

}

#navul{

list-style:none;

margin-left:50px;

}

#navli{

display:inline;

}

#nava{

line-height:40px;

color:#fff;

text-decoration:none;

padding:20px20px;

}

#nava:hover{

background-color:#060;

}

</style>

以上就是“HTML怎么讓ul中的li元素橫向排列”這篇文章的所有內容,感謝各位的閱讀!相信大家閱讀完這篇文章都有很大的收獲,小編每天都會為大家更新不同的知識,如果還想學習更多的知識,請關注本站行業資訊頻道。