Question

我正在尝试使用flexbox创建一个简单的导航菜单。我的问题是我想使用align-self将li.dropdown -c放在菜单的右侧。我尝试了一些东西，但它不起作用。有谁能告诉我出了什么问题？

<nav>
        <div class="top">
            <ul class="main-ul">
                <li><a href="#">One</a></li>
                <li><a href="#">Two</a></li>
                <li><a href="#">Three</a></li>
                <li class="dropdown-c"><a href="#">Four</a>
                    <ul class="in-ul">
                        <li><a href="#">Five</a></li>
                        <li><a href="#">Six</a></li>
                        <li><a href="#">Seven</a></li>
                        <li><a href="#">Eight</a></li>
                        <li><a href="#">Nine</a></li>
                        <li><a href="#">Ten</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>

CSS：

* {
    padding:0px;
    margin:0px;
}

body {
    font-family: sans-serif;
    color:lightcoral;
    background:#506679;
}

ul {
    list-style: none;
}

a {
    color:grey;
    padding:10px 20px;
}

.main-ul {
    display: flex;
    justify-content: flex-start;
}

li.dropdown-c {
    display: flex;
    align-self: flex-end;
}

Answer 1

align-self属性仅适用于与align-content相同的方向，而不是justify-content。相反，在li.dropdown上放置一个自动左边距，这应该有效。

li.dropdown {
    display: flex;
    margin-left: auto;
}

在codepen中测试后，我意识到你甚至没有正确选择li。它有class dropdown-c，而不是下拉列表：

li.dropdown-c {
    display: flex;
    margin-left: auto;
}

Flexbox自对齐不起作用

1 个答案: