无序列表是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>
