我有一个包含2个文本的列表,我希望它们与其他文本一起显示内联,但是在父div的左边有一个浮点数,而另一个浮点数在父div的右边,没有添加id'等等。
我尝试使用CSS选择器
.rating li:first-child
&安培;
.rating li:nth-child(2)
并为每个设置不同的text-algin属性,但它不起作用。 有没有人有任何建议?
HTML是:
<ul class="rating">
<li>Below Average</li>
<li>Above Average</li>
</ul>
答案 0 :(得分:0)
您在问题中说“浮动”,这是一个选项,或者您可以在现代浏览器中添加flexbox
以进行渐进式增强。
.rating {
margin: 0;
padding: 0;
list-style-type: none;
overflow: hidden;
margin-bottom: 1em;
}
li {
background: #bada55;
}
.rating li:first-child {
float: left;
}
.rating li:nth-child(2) {
float: right;
}
.flex {
display: flex;
justify-content: space-between;
}
<ul class="rating">
<li>Below Average</li>
<li>Above Average</li>
</ul>
<ul class="rating flex">
<li>Flex Left</li>
<li>Flex Right</li>
</ul>