HTML中的標籤中li橫向排列

第一步、編寫橫向選單的HTML程式碼架構

請將以下程式碼加入HTML文件的導覽列區域。

<ul id="menu">
 <li><a href="http://www.baidu.com">Baidu.Com</a></li>
 <li><a href="http://www.Code52.Net">Code52.Net</a></li>
 <li><a href="http://www.yahoo.com">Yahoo.Com</a></li>
 <li><a href="http://www.google.com" class="last">Google.Com</a></li>
</ul>

第二步、寫CSS程式碼

#1、設定公共樣式

請將下列CSS程式碼加入HTML文件的...標籤範圍中。

<style type="text/css">
#menu { 
font:12px verdana, arial, sans-serif; /* 设置文字大小和字体样式 */
}
#menu, #menu li {
list-style:none; /* 将默认的列表符号去掉 */
padding:0; /* 将默认的内边距去掉 */
margin:0; /* 将默认的外边距去掉 */
}
</style>

大家都知道，

中的各條目
• 預設都是縱向排列的，我們需要定義CSS來讓其橫向排列起來。

  Tips：因為我們現在將導覽列拉出來獨立講解，所以需要設定一些公共樣式，如果您在body 或其他地方已經重設了預設效果，以上程式碼可以去掉

  2、讓文字橫排

  大家都知道，

  標籤下的項目
  • 預設是縱向排列的，我們需要定義額外的CSS屬性讓其橫向排列。

    <style type="text/css">
    #menu li { 
    float:left; /* 往左浮动 */
    }
    </style>

    3、設定連結樣式：

    <style type="text/css">
    #menu li a {
    display:block; /* 将链接设为块级元素 */
    padding:8px 50px; /* 设置内边距 */
    background:#3A4953; /* 设置背景色 */
    color:#fff; /* 设置文字颜色 */
    text-decoration:none; /* 去掉下划线 */
    border-right:1px solid #000; /* 在左侧加上分隔线 */
    }
    </style>

    我們用內邊距（即填滿padding）的方式，讓每個選單變得寬一些，如果你的選單是中英文混排的，建議設定單一選單的高寬，這樣可以避免中英文字元行高不一致所導致的高度誤差。設定固定高度的方式：

    <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>

    4、連結懸停效果：

    透過以上幾步的綜合作用，一個橫向導航列的初步框架就出現了。此步主要是定義連結的懸停效果，讓導覽列更美觀。當然，如果要讓導覽列更炫麗，你可以在CSS懸停屬性上定義背景圖片。

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

    這裡的程式碼一個缺陷，最右邊會多出來一個邊框，由於:first-child 偽類不被IE系列瀏覽器所支持，我們只能單獨寫一個樣式，將最後一個邊框去掉，同時要為HTML 程式碼增加一個額外選擇符。

    <ul id="menu">
    <li><a href="http://www.baidu.com">Baidu.Com</a></li>
    <li><a href="http://www.Code52.Net">Code52.Net</a></li>
    <li><a href="http://www.yahoo.com">Yahoo.com</a></li>
    <li><a href="http://www.google.com" class="last">Google.com</a></li>
    </ul>
    
    <style type="text/css">
    #menu li a.last {
    border-right:0; /* 去掉左侧边框 */
    }
    </style>

    好了，到這裡一個簡單的橫向導航選單就製作完成了，是不是很簡單？ 以下給出完整程式碼：

    <style type="text/css">
    #menu { 
     font:12px verdana, arial, sans-serif; 
    }
    #menu, #menu li {
     list-style:none;
     padding:0;
     margin:0;
    }
    #menu li { 
     float:left; 
    }
    #menu li a {
     display:block;
     /* 如果是中英文混排的文字，建议用固定宽度
     width:150px;
     height:30px;
     line-height:30px;
     text-align:center;
     */
     padding:8px 50px;
     background:#3A4953;
     color:#fff;
     text-decoration:none;
     border-right:1px solid #000;
    }
    #menu li a:hover {
     background:#146C9C;
     color:#fff;
     text-decoration:none;
     border-right:1px solid #000;
    }
    #menu li a.last {
     border-right:0; /* 去掉左侧边框 */
    }
    </style>

    你可以查看我們製作的線上示範和下載本文提供的實例包。

    上面的CSS樣式，我修改了一下。如下：

    以上是HTML中的標籤中li橫向排列的詳細內容。更多資訊請關注PHP中文網其他相關文章！