HTMl中標簽中li橫向排列的實現示例

2020-05-20 15:31:45 來源：互聯網作者：佚名 人氣： 次閱讀 104 條評論

文章主要介紹了HTMl中標簽中li橫向排列的實現示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧...

大多數的導航欄都是橫向排列如下圖所示，那么這究竟是怎么實現的呢？其實它主要運用<ul>標簽中li的橫向排列，下面以一個例子向大家詳細講解具體是如何實現的。

1編寫橫向菜單的HTML代碼架構

<ul id="menu">
?<li><a >Baidu.Com</a></li>
?<li><a >Jb51.net</a></li>
?<li><a >Yahoo.Com</a></li>
?<li><a  class="last">Google.Com</a></li>
</ul>

2 編寫CSS代碼

<1>設置公共樣式

<style type="text/css">
????#menu { 
????????font:12px verdana, arial, sans-serif; /* 設置文字大小和字體樣式 */
????????width: 100%;
????}
????#menu, #menu li {
????????list-style:none; /* 將默認的列表符號去掉 */
????????padding:0; /* 將默認的內邊距去掉 */
????????margin:0; /* 將默認的外邊距去掉 */
????????float: left; /* 往左浮動 */
????????display: block;
}

<2>設置鏈接樣式

<style type="text/css">
????#menu li a {
????????display:block; /* 將鏈接設為塊級元素 */
????????width:150px; /* 設置寬度 */
????????height:30px; /* 設置高度 */
????????line-height:30px; /* 設置行高，將行高和高度設置同一個值，可以讓單行文本垂直居中 */
????????text-align:center; /* 居中對齊文字 */
????????background:#3A4953; /* 設置背景色 */
????????color:#fff; /* 設置文字顏色 */
????????text-decoration:none; /* 去掉下劃線 */
????????border-right:1px solid #000; /* 在左側加上分隔線 */
}
</style>

<3>鏈接懸停效果

<style type="text/css">
????#menu li a:hover {
????background:#146C9C; /* 變換背景色 */
????color:#fff; /* 變換文字顏色 */
????}
</style>

<4>去掉最左邊導航欄的右邊框

<style type="text/css">
????#menu li a.last {
????border-right:0; /* 去掉左側邊框 */
????}
</style>

3 完整的代碼

<!DOCTYPE html>
<html>
<head>
????<meta charset="utf-8">
????<title>圖片提示效果</title>
????<script src="../jquery-3.3.1.min.js"></script>
????<style type="text/css">
????????#menu { 
????????????font:12px verdana, arial, sans-serif; /* 設置文字大小和字體樣式 */
????????????width: 100%;
????????}
????????#menu, #menu li {
????????????list-style:none; /* 將默認的列表符號去掉 */
????????????padding:0; /* 將默認的內邊距去掉 */
????????????margin:0; /* 將默認的外邊距去掉 */
????????????float: left; /* 往左浮動 */
????????????display: block;
????????}
????????#menu li a {
????????????display:inline-block; /* 將鏈接設為塊級元素 */
????????????width:150px; /* 設置寬度 */
????????????height:30px; /* 設置高度 */
????????????line-height:30px; /* 設置行高，將行高和高度設置同一個值，可以讓單行文本垂直居中 */
????????????text-align:center; /* 居中對齊文字 */
????????????background:#3A4953; /* 設置背景色 */
????????????color:#fff; /* 設置文字顏色 */
????????????text-decoration:none; /* 去掉下劃線 */
????????????border-right:1px solid #000; /* 在左側加上分隔線 */
????????}
????????#menu li a:hover {
????????????background:#146C9C; /* 變換背景色 */
????????????color:#fff; /* 變換文字顏色 */
????????}
????????#menu li a.last {
????????????border-right:0; /* 去掉左側邊框 */
????????}
</style>
??
</head>
<body>
????<ul id="menu">
????????<li><a >Baidu.Com</a></li>
?????????<li><a >Jb51.net</a></li>
?????????<li><a >Yahoo.Com</a></li>
?????????<li><a  class="last">Google.Com</a></li>
????</ul>
</body>
</html>

總之，使其橫向排列的最需要的是:   <ui>標簽的主要樣式為display:balock;

   <li>的主要樣式為display:inline-balock,float：left,list-style:none;

到此這篇關于HTMl中標簽中li橫向排列的實現示例的文章就介紹到這了,更多相關HTMl li橫向排列內容請搜以前的文章或下面相關文章，

您可能感興趣的文章

相關文章