HTML中的标签中li横向排列（导航栏制作）html代码
<div class="container-fluid h4"  id="shead">
<ul>
<li><a href="#" class="a">地区</a></li>
<li><a href="#" class="a">安徽省</a></li>
<li><a href="#" class="a">铜陵市</a></li>
<li><a href="#" class="a">类型</a></li>
<li><a href="#" class="a">合同纠纷</a></li>
<li><a href="#" class="a">借贷纠纷</a></li>
<li><a href="#" class="a">劳动纠纷</a></li>
<li><a href="#" class="a">刑事辩护</a></li>
<li><a href="#" class="a">交通事故</a></li>
<li><a href="#" class="a">房产纠纷</a></li>
<li><a href="#" class="a">建筑纠纷</a></li>
<li><a href="#" class="a">离婚纠纷</a></li>
<li><a href="#" class="a">其他</a></li>
<li><a href="#" class="a">执业年限</a></li>
<li><a href="#" class="a">案例数量</a></li>
</ul>
</div>
</div>
</div>
css代码
#shead{
background-color: #3d578a;
width: 100%;
height: 30%;
vertical-align: middle;
font-size: 18px;
padding-top: 1%;
padding-bottom: 1%;
}
#shead ul li{
html代码转链接
float:left;
list-style: none;
margin-left: 2%;
}
.a{
color:white;
}
效果如下

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。