老师如何让li标签对齐呢
来源：4-8 编程练习
慕九州8126026
2020-05-18 17:45:25
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
list-style: none;
}
a{
text-decoration: none;
color: #000;
}
#tab{
width: 500px;
margin:100px auto;
border:1px solid #c0c0c0;
border-radius: 4px;
}
#tab_header{
}
#tab_header ul{
display: flex;
justify-content: space-around;
height: 40px;
line-height: 40px;
background:#ccc;
text-align: center;
}
#tab_header ul li{
width: 100%;
border-bottom:1px solid #c0c0c0;
border-radius: 2px;
}
#tab_header ul li.selected{
background:#fff;
border-bottom:none;
}
#tab_content{
overflow: hidden;
}
#tab_content .dom{
margin:5px auto;
display: none;
}
#tab_content .dom li{
float:left;
margin:5px 30px;
}
</style>
</head>
<body>
<div id="tab">
<!-- 头部 -->
<div id="tab_header">
<ul>
<li class="selected">公告</li>
<li>规则</li>
<li>论坛</li>
<li>安全</li>
<li>公益</li>
</ul>
</div>
<!-- 类容 -->
<div id="tab_content">
<div class="dom" style="display: block;">
<ul>
<li><a href="#">数据七夕：金牛爱送玫瑰</a></li>
<li><a href="#">阿里打造’互联网监管‘</a></li>
<li><a href="#">10万家店60万新品</a></li>
<li><a href="#">全球最大网上时装周</a></li>
</ul>
</div>
<div class="dom">
<ul>
<li><a href="#">数据七夕：金牛爱送玫瑰</a></li>
<li><a href="#">阿里打造’互联网监管‘</a></li>
<li><a href="#">10万家店60万新品</a></li>
<li><a href="#">全球最大网上时装周</a></li>
</ul>
</div>
<div class="dom">
<ul>
<li><a href="#">数据七夕：金牛爱送玫瑰</a></li>
<li><a href="#">阿里打造’互联网监管‘</a></li>
<li><a href="#">10万家店60万新品</a></li>
<li><a href="#">全球最大网上时装周</a></li>
</ul>
</div>
<div class="dom">
<ul>
<li><a href="#">数据七夕：金牛爱送玫瑰</a></li>
<li><a href="#">阿里打造’互联网监管‘</a></li>
<li><a href="#">10万家店60万新品</a></li>
<li><a href="#">全球最大网上时装周</a></li>
</ul>
</div>
<div class="dom">
<ul>
<li><a href="#">数据七夕：金牛爱送玫瑰</a></li>
<li><a href="#">阿里打造’互联网监管‘</a></li>
<li><a href="#">10万家店60万新品</a></li>
<li><a href="#">全球最大网上时装周</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
写回答
1回答
-
同学你好，如果想要分为两列显示，可以设置li宽度为50%，然后间隙可以使用文本缩进属性。参考
效果
自己可以测试下，祝学习愉快！
1
相似问题