NEC学习 ---- 模块 -水平文字链接列表

HTML代码:

<div class="container">

    <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>

CSS代码:

<style>

    .container {

        width:600px;

        padding:5px;

        margin:45px auto;

        background-color:pink; 

    }

    .m-list1 ul{

        margin-left:-10px;/*根据实际调整, 一般情况下和下面的padding-left值等*/

    }

    .m-list1 li {

        line-height:21px;

        float:left;

        padding-left:10px;

        color:#777;

    }

    .m-list1 li a:hover {

        text-decoration:underline;

    }

</style>

浮动的应用和间距之间调整以及转换.