精美而实用的网站，关注web编程技术、网站运营、SEO推广，让您轻松愉快的学习

本例主要跟大家介绍了：div+css水平文字链接列表，是最简单的水平文字列表实现方式，用于初学者参考学习，主要用到了浮动float属性。

div+css水平文字链接列表运行效果

div+css水平文字链接列表HTML代码

<div class="m-list1">
    <ul class="f-cb">
        <li><a href="#">列表文字</a></li>
        <li><a href="#">文字或链接</a></li>
        <li><a href="#">文字或链接</a></li>
        <li><a href="#">文字</a></li>
    </ul>
</div>
<div class="clear"></div>
<div class="m-list1 m-list1-c1">
    <ul class="f-cb">
        <li><a href="#">文字</a></li>
        <li><a href="#">文字或链接</a></li>
        <li><a href="#">文字或链接</a></li>
        <li><a href="#">文字</a></li>
    </ul>
</div>

div+css水平文字链接列表CSS代码

/* 水平文字链接列表 */
.m-list1{line-height:30px;}
.m-list1 ul{margin-left:-10px;}
.m-list1 ul li{float:left;padding-left:10px;}
.m-list1 a,.m-list1 a:hover{text-decoration:none;color:#333; font-size:14px;}
/* 水平文字链接列表-颜色1 */
.m-list1-c1 a,.m-list1-c1 a:hover{color:#3891eb;}
.clear{ clear:both;}

在线Demo预览

Tags：DIV+CSS HTML CSS