html - Align text right in li that does not have class or id
问题描述
I want to align text right side. But that text does not have any id or class.
.list{list-style:none;}
.list li{padding:10px;border:1px solid black;margin-top:3px;}
.list li a{color:black;}
.list li a:before {
content: "\f00c"; /* FontAwesome Unicode */
font-family: FontAwesome;
display: inline-block;
margin-left: 1px; /* same as padding-left set on li */
margin-right:10px;
}
<ul class="list">
<li class="incomplete"><a href="http://localhost/">First Lesson</a> - Not completed</li>
<li class="incomplete"><a href="http://localhost/">Second Lesson</a> - Not completed</li>
<li class="incomplete"><a href="http://localhost/">Third Lesson</a> - Not completed</li>
<li class="incomplete"><a href="http://localhost/">Fourth Lesson</a> - Not completed</li>
<li class="incomplete"><a href="http://localhost/">Fifth Lesson</a> - Not completed</li>
<li class="incomplete"><a href="http://localhost/">Sixth Lesson</a> - Not completed</li>
</ul>
I want to align Not completed
text to the right side.
解决方案
Use flex
for li
and use justify-content:space-between;
fiddle to play-around.
.list {
list-style: none;
}
.list li {
padding: 10px;
border: 1px solid black;
margin-top: 3px;
display: flex;
justify-content: space-between;
}
.list li a {
color: black;
}
.list li a:before {
content: "\f00c";
/* FontAwesome Unicode */
font-family: FontAwesome;
display: inline-block;
margin-left: 1px;
/* same as padding-left set on li */
margin-right: 10px;
}
<ul class="list">
<li class="incomplete"><a href="http://localhost/">First Lesson</a> - Not completed</li>
<li class="incomplete"><a href="http://localhost/">Second Lesson</a> - Not completed</li>
<li class="incomplete"><a href="http://localhost/">Third Lesson</a> - Not completed</li>
<li class="incomplete"><a href="http://localhost/">Fourth Lesson</a> - Not completed</li>
<li class="incomplete"><a href="http://localhost/">Fifth Lesson</a> - Not completed</li>
<li class="incomplete"><a href="http://localhost/">Sixth Lesson</a> - Not completed</li>
</ul>
推荐阅读
- node.js - 使用 Typescript 向 expressjs 中的 req 对象添加属性
- python - numpy linalg.solve,不是方阵
- micronaut - Micronaut 为 MySQL 配置 micronaut-jdbc-tomcat 数据源
- android - ADB 无法连接到 ip 地址
- java - 错误 404--未找到服务器未找到任何与请求 URI 匹配的内容
- javascript - 图片预览后热自动上传图片到服务器
- c# - 确定 html 节点的样式
- html - 用css使元素弯曲
- bash - Bash Process Substitution 使用 tee 和 while 循环
- ruby-on-rails - 生产中的 Rails 线程限制