定位三个列表元素 - 2 和 3 直接在 1 下方

Question

我想放置这三个列表项，使它们都浮动到页面的右侧，并且第 1 项直接位于第 2 项和第 3 项的上方。

这是 html 位：

<div class="header-text">
    <div class="header-contact">
         <ul class="header-contact-list">
                            <li><a href="">item 1</a></li>
                            <li><a href="">item 2</a></li>
                            <li><a href="">item 3</a></li>
         </ul>
</div>

</div>

目前，它们都向右浮动，因为我已将 float: right 添加到列表元素中（有趣的是，第 1 项最右边，然后是第 2 项，然后是第 3 项），但是，它们仍然在同一条线。我错过了什么？我无法用 padding-right 作弊，因为我还需要更改它的颜色。

Answer 1

不确定我是否理解你的问题，但如果你想将列表右对齐，其中一行的第 1 项和下一行的第 2 项和第 3 项，你可以这样做。

将 display: inline-block; 添加到第 2 项和第 3 项：

.header-contact-list li:not(:first-of-type) {
   display: inline-block;
}

并将float: right;添加到.header-contact

定位三个列表元素 - 2 和 3 直接在 1 下方

Positioning three list elements - 2 and 3 directly below 1

css

layout

positioning