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

时间:2021-08-15 19:32:44

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>

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