ul li做橫向導航欄例子

/* ul li以橫排顯示 */

/* 所有class為menu的div中的ul樣式 */
div.menu ul
{
    list-style:none; /* 去掉ul前面的符號 */
    margin: 0px; /* 與外界元素的距離為0 */
    padding: 0px; /* 與內部元素的距離為0 */
    width: auto; /* 寬度根據元素內容調整 */
}
/* 所有class為menu的div中的ul中的li樣式 */
div.menu ul li
{
    float:left; /* 向左漂移，將豎排變為橫排 */
}
/* 所有class為menu的div中的ul中的a樣式(包括尚未點擊的和點擊過的樣式) */
div.menu ul li a, div.menu ul li a:visited
{
    background-color: #465c71; /* 背景色 */
    border: 1px #4e667d solid; /* 邊框 */
    color: #dde4ec; /* 文字顏色 */
    display: block; /* 此元素將顯示為塊級元素，此元素前后會帶有換行符 */
    line-height: 1.35em; /* 行高 */
    padding: 4px 20px; /* 內部填充的距離 */
    text-decoration: none; /* 不顯示超鏈接下划線 */
    white-space: nowrap; /* 對於文本內的空白處，不會換行，文本會在在同一行上繼續，直到遇到 <br> 標簽為止。 */
}
/* 所有class為menu的div中的ul中的a樣式(鼠標移動到元素中的樣式) */
div.menu ul li a:hover
{
    background-color: #bfcbd6; /* 背景色 */
    color: #465c71; /* 文字顏色 */
    text-decoration: none; /* 不顯示超鏈接下划線 */
}
/* 所有class為menu的div中的ul中的a樣式(鼠標點擊元素時的樣式) */
div.menu ul li a:active
{
    background-color: #465c71; /* 背景色 */
    color: #cfdbe6; /* 文字顏色 */
    text-decoration: none; /* 不顯示超鏈接下划線 */
}

<div class="menu">
        <ul>
            <li><a href="javascript:void(0);">主頁</a></li>
            <li><a href="javascript:void(0);">工作日志</a></li>
            <li><a href="javascript:void(0);">設備運行記錄</a></li>
            <li><a href="javascript:void(0);">其他</a></li>
        </ul>
    </div>