极客观点
项目管理
HarmonyOS
1.给li清除了浮动，但是li的默认小圆点却显示在左浮动的a元素的后边，而不是在最前面，怎么解决呢？
2.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body,header,nav,section,ul,ol,p,span,a,img,input,form{
padding: 0;
margin: 0;
}
a{
text-decoration: none;
color: #000;
}
body{
width: 1000px;
margin: 0 auto;
font-family: "微软雅黑";
fotm-size:12px;
}
/*第一部分公用样式*/
section.con_1 .con_1_1,section.con_1 .con_1_2,section.con_1 .con_1_3{
padding: 10px 15px;
float: left;
}
/*第一部分内容*/
section.con_1{
width: 1000px;
height: 240px;
margin-bottom: 24px;
overflow: hidden;
}
.con_1 .con_1_1{
width: 475px;
height: 220px;
}
/*标题*/
.con_1 .c_top{
width: 475px;
height: 30px;
line-height: 30px;
font-size: 20px;
overflow: hidden;
}
.con_1 .c_top span{
float: left;
text-align: left;
color: #595959;
}
.con_1 .c_top a,.con_2 .c_top a{
display: block;
width: 25px;
height: 25px;
line-height: 25px;
border-radius: 50%;
border:2px solid #ebebeb;
text-align: center;
float: right;
background-color: #fff;
font-size: 20px;
color: #7a7a7a;
}
/*第一部分内容*/
.con_1 .con_1_1 ul.c_content{
width: 455px;
height: 170px;
margin:10px 10px;
overflow: hidden;
/*list-style: none;*/
list-style: disc;
list-style-position:inside;
}
.con_1 .con_1_1 .c_content li{
width: 455px;
height: 30px;
line-height: 30px;
overflow: hidden;
}
.con_1 .con_1_1 .c_content li a{
display: inline-block;
width: 300px;
/*width: 0;*/
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-align: left;
text-indent: 5px;
font-size: 12px;
cursor: pointer;
color: #a1a1a1;
float: left;
/*用a的模拟*/
/*display: list-item;
list-style: disc;
list-style-position: inside;*/
}
.con_1 .con_1_1 .c_content li span{
text-align: right;
font-size: 12px;
color: #a1a1a1;
float: right;
}
.con_1 .con_1_1 .c_content li a:hover{
color: red;
}
/**/
.con_1 .con_1_2{
width: 215px;
height: 220px;
background-color: #f1f1f1;
}
.con_1 .con_1_2 .c_content{
width: 215px;
margin-top: 40px;;
}
/**/
.con_1 .con_1_3{
width: 220px;
height: 220px;
}
.con_1 .con_1_3 .c_content{
width: 220px;
margin-top: 40px;
overflow: hidden;
}
</style>
</head>
<body>
<section class="con_1">
<div class="con_1_1">
<div class="c_top">
<span>新闻资讯</span>
<a href="#">+</a>
</div>
<ul class="c_content">
<li><a href="#">随便说点什么随便说点什么岁随便说点什么随便说点什么</a>
<span>2016-12-9</span>
</li>
<li><a href="#">随便说点什么随便说点什么岁随便说点什么</a><span>2016-12-9</span></li>
<li><a href="#">随便说点什么随便说点什么岁随便说点什么</a><span>2016-12-9</span></li>
<li><a href="#">随便说点什么随便说点什么岁随便说点什么</a><span>2016-12-9</span></li>
<li><a href="#">随便说点什么随便说点什么岁随便说点什么随便说点什么</a><span>2016-12-9</span></li>
</ul>
</div>
<div class="con_1_2">
<div class="c_top">
<span>卧龙介绍</span>
</div>
<div class="c_content">
</div>
</div>
<div class="con_1_3">
<div class="c_top">
<span>人才招聘</span>
</div>
<div class="c_content">
</div>
</div>
</section>
</body>
</html>
多余代码太多了，思路也不对
li里面的a和span不用都浮动，都浮动就会造成li的小圆点标记错位，你需要的只是把日期推到右边，标签的新闻让它默认左对齐就行了，不需要float:Left;
改成下面这样：
https://jsfiddle.net/yaL61bvf/1/
a标签的代码单独扔到css栏目了，自己看看就行了