内联列表项左右对齐

Question

我有一个包含 2 段文本的列表，我希望它们彼此内嵌显示，但是有一个浮动在父 div 的左侧，另一个浮动在父 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>

Answer 1

好吧，您在问题中提到了 "float"，这是一种选择，或者您可以添加 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>

内联列表项左右对齐

Inline list items aligned left and right

html

css

alignment

html-lists