標籤：idt 推薦 sheet 浮動 自由度 序列 設定 div 統一
無序列表是html頁面排版經常用到的非常實用的標籤，但是新手在使用無序列表時，經常會在橫向排版上出現問題，筆者在這裡提供了筆者在使用無序列表製作網頁導覽列時的幾種方法與常見問題的解決問題。（以css內部樣式為例）
[註：有同學之前問過我怎麼製作一張網頁，但只會html，本文用到均為css。故說明：若急需製作導航，無css技術基礎的，在<head>標籤中加<style rel="stylesheet" type="text/css"><style>,再將css寫入其中就行了。需要按鍵代碼，可在最後看到。]
1.通過<li>標籤設定浮動排列。
①使用方法：在css樣式中加入float:left;屬性。
②常見問題：當網頁頁面有調整時導航同時改變，排版變混亂。
③解決方案：⑴在筆者接觸的網站學習中比較常見方法有對li標籤進行絕對位置，然後調節left大小。
這種方式比較王道，利於單個修改。但是對於網頁要求低的，可能偏麻煩。
⑵基於自身實驗，筆者提出一個十分簡單的方法
可以通過<div>標籤設定格式，方法十分簡單，只要把div的whith值設成等於或者大於網頁最大長度即可。
2.第二種方法：
①利用<li>標籤的display屬性的inline屬性值達到同行排列。同時可以通過對margin，padding值修改距離。
②問題與解決方案與第一種相同。
3.第三種方法：
①完全使用絕對位置，適用於對按鈕位置有特殊要求。（由於比較麻煩，而且一般導航都是一列，所以並不推薦，但是需要的朋友還是很好用的）
②一般不會出現排版問題
③優點：穩定，版面一般不會出問題，自由度高。缺點：不如前面的統一規整，相對麻煩，排版麻煩。
以上就是筆者整理出的所有內容。不能保證一定全面與精確，所以還請有更好方法的博友可以留言，有錯誤需要指出的也希望各位多多指教，本文旨在協助和筆者一樣在學習前期遇到困難的博友。謝謝各位啦n(*≧▽≦*)n。
前面說的按鈕代碼：
a{ position: relative; overflow: hidden;
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 10px;
margin: 4px;
width: 80px;
}
關於網頁導覽列製作的幾種方法與常見問題解決（新人向）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
