無序列表是html頁面排版經常用到的非常實用的標籤，但是新手在使用無序列表時，經常會在橫向排版上出現問題，筆者在這裡提供了筆者在使用無序列表製作網頁導覽列時的幾種方法與常見問題的解決問題。 （以css內部樣式為例） [註：有同學之前問過我怎麼製作一張網頁，但只會html，本文用到皆為css。故說明：若急需製作導航，無css技術基礎的，在標籤中加<style>,再將css寫入其中就行了。需要按鍵代碼，最後看到。 ]</strong></span></p> <p> <strong>1.透過<li>標籤設定浮動排列。 </strong></p> <p> ①使用方法：在css樣式中加入float:left;屬性。 </p> <p><img src="https://img.php.cn/upload/article/000/000/001/777777743deaee724c059965d20327f1-0.png" alt=""></p> <p># ②常見問題：當網頁頁面有調整時導覽同時改變，排版變混亂。 </p> <p><img src="https://img.php.cn/upload/article/000/000/001/777777743deaee724c059965d20327f1-1.png" alt=""></p> <p># ③解決方法：<span style="color: #ff0000;">⑴在筆者接觸的網站學習中比較常見方法有對li標籤進行絕對定位，然後調節left大小。 </span></p> <p><img src="https://img.php.cn/upload/article/000/000/001/777777743deaee724c059965d20327f1-2.png" alt=""><img src="https://img.php.cn/upload/article/000/000/001/777777743deaee724c059965d20327f1-3.png" alt=""></p> <p> 這種方式比較王道，利於單一修改。但是對於網頁要求低的，可能偏麻煩。 </p> <p> <span style="color: #ff0000;">⑵基於自身實驗，筆者提出一個十分簡單的方法</span></p> <p># 可以透過<div>標籤設定格式，方法十分簡單，只要把div的whith值設成等於或大於網頁最大長度即可。 </p> <p><img src="https://img.php.cn/upload/article/000/000/001/777777743deaee724c059965d20327f1-4.png" alt=""></p> <p># <strong>2.第二種方法</strong>：</p> <p>①利用<li>標籤的display屬性的inline屬性值達到同儕排列。同時可以透過對margin，padding值修改距離。 </p> <p><img src="https://img.php.cn/upload/article/000/000/001/777777743deaee724c059965d20327f1-5.png" alt=""></p> <p># ②問題與解決方法與第一種相同。 </p> <p> <strong>3.第三種方法</strong>：</p> <p>①完全使用絕對定位，適用於按鈕位置有特殊要求。 （由於比較麻煩，而且一般導航都是一列，所以不推薦，但是需要的朋友還是很好用的）</p> <p><img src="https://img.php.cn/upload/article/000/000/001/9d76f68fb6a97eddcbbe7b296c11bebc-6.png" alt=""></p> <p>#②一般不會出現排版問題</p> <p>③優點：穩定，版面一般不會出問題，自由度高。缺點：不如前面的統一規整，相對麻煩，排版麻煩。 </p> <p> </p> <h1>以上就是筆者整理出來的所有內容。不能保證一定全面與精確，所以還請有更好方法的博友可以留言，有錯誤需要指出的也希望各位多多指教，本文旨在幫助和筆者一樣在學習前期遇到困難的博友。謝謝各位啦n(*≧▽≦*)n。 </h1> <p>前面說的按鈕程式碼：</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>a{ position: relative; overflow: hidden;<br> background-color: #4CAF50; /* Green */<br> border: none;<br> color: white;<br> padding: 15px 32px;<br> text-align: center;<br> text-decoration: none;<br> display: inline-block;<br> font-size: 16px;<br> border-radius: 10px;<br> margin: 4px;<br> width: 80px;<br>}</pre><div class="contentsignin">登入後複製</div></div> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p># </p> <p># </p> <p>## </p>
