内联列表项左右对齐

Question

我有一个包含2个文本的列表，我希望它们与其他文本一起显示内联，但是在父div的左边有一个浮点数，而另一个浮点数在父div的右边，没有添加id＆＃39;等等。

我尝试使用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>

Answer 1

您在问题中说“浮动”，这是一个选项，或者您可以在现代浏览器中添加flexbox以进行渐进式增强。

JSfiddle Demo

.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>