css 使Flexbox二级子项位于第一个子项之下

kmpatx3s  于 2022-12-15  发布在  其他
关注(0)|答案(1)|浏览(149)

我尝试做一个表格,我需要显示用户。我已经做了所有的确定,但我希望电子邮件地址下的用户名,但我不明白如何才能使这种情况发生时,使用flexbox。
我试过将display: block添加到email div中,但没有成功。
你们能帮帮我吗?谢谢!

* {
    color: white;
    background: black;
}

.nav-search-users {
    width: calc(400px - 50px);
    height: 100%;
    box-shadow: rgb(136 153 166 / 20%) 0px 0px 15px, rgb(136 153 166 / 15%) 0px 0px 3px 1px;
    border-radius: 10px;
}

.nav-search-users .nav-sr-header {
    padding-top: 10px;
    display: flex;
}

.nav-search-users .nav-sr-header .nav-sr-h-title {
    margin-top: 5px;
    margin-left: 20px;
    font-size: 20px;
    font-weight: 600;
}

.nav-search-users .nav-sr-header .nav-sr-h-more {
    margin-top: 5px;
    margin-left: auto;
    margin-right: 20px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}

.nav-search-users .nav-sr-list {
    border-radius: 30px;
    margin-top: 10px;
}

.nav-search-users .nav-sr-list .nav-sr-item {
    padding: 20px;
}

.nav-search-users .nav-sr-list .nav-sr-item:hover {
    background-color: lightblue;
}

.nav-search-users .nav-sr-list .nav-sr-item:last-child:hover {
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}

.nav-search-users .nav-sr-list .nav-sr-item .nav-sr-item-content {
    display: flex;
    align-items: center;
}

.nav-search-users .nav-sr-list .nav-sr-item .nav-sr-item-content .nav-sr-item-picture {
    width: 50px;
    height: 50px;
}

.nav-search-users .nav-sr-list .nav-sr-item .nav-sr-item-content .nav-sr-item-picture img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 50%;
}

.nav-search-users .nav-sr-list .nav-sr-item .nav-sr-item-content .nav-sr-item-name {
    margin-left: 10px;
}

.nav-search-users .nav-sr-list .nav-sr-item .nav-sr-item-content .nav-sr-item-email {
    display: block;
}

.nav-search-users .nav-sr-list .nav-sr-item .nav-sr-item-content .nav-sr-clear-item {
    margin-left: auto;
}

button {
    background: lightblue;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
}

button:hover {
    opacity: 0.5;
}
<div class="nav-search-users">
    <div class="nav-sr-header">
        <div class="nav-sr-h-title">
            <span>All users</span>
        </div>
        <div class="nav-sr-h-more">
            <span>View more</span>
        </div>
    </div>
    <div class="nav-sr-list">
        <div class="nav-sr-item">
            <div class="nav-sr-item-content">
                <div class="nav-sr-item-picture">
                    <img src="https://hips.hearstapps.com/hmg-prod/images/pop-index-2020-chevrolet-corvette-c8-102-1571146873.jpg">
                </div>
                <div class="nav-sr-item-name">
                    <span class="nav-sr-in-username">My name</span>
                </div>
                <div class="nav-sr-item-email">
                    <span>email@gmail.com</span>
                </div>
                <div class="nav-sr-clear-item">
                    <button>edit</button>
                </div>
            </div>
        </div>
    </div>
</div>
3wabscal

3wabscal1#

只需将它们 Package 在另一个div中:

* {
    color: white;
    background: black;
}

.nav-search-users {
    width: calc(400px - 50px);
    height: 100%;
    box-shadow: rgb(136 153 166 / 20%) 0px 0px 15px, rgb(136 153 166 / 15%) 0px 0px 3px 1px;
    border-radius: 10px;
}

.nav-search-users .nav-sr-header {
    padding-top: 10px;
    display: flex;
}

.nav-search-users .nav-sr-header .nav-sr-h-title {
    margin-top: 5px;
    margin-left: 20px;
    font-size: 20px;
    font-weight: 600;
}

.nav-search-users .nav-sr-header .nav-sr-h-more {
    margin-top: 5px;
    margin-left: auto;
    margin-right: 20px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}

.nav-search-users .nav-sr-list {
    border-radius: 30px;
    margin-top: 10px;
}

.nav-search-users .nav-sr-list .nav-sr-item {
    padding: 20px;
}

.nav-search-users .nav-sr-list .nav-sr-item:hover {
    background-color: lightblue;
}

.nav-search-users .nav-sr-list .nav-sr-item:last-child:hover {
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}

.nav-search-users .nav-sr-list .nav-sr-item .nav-sr-item-content {
    display: flex;
    align-items: center;
}

.nav-search-users .nav-sr-list .nav-sr-item .nav-sr-item-content .nav-sr-item-picture {
    width: 50px;
    height: 50px;
}

.nav-search-users .nav-sr-list .nav-sr-item .nav-sr-item-content .nav-sr-item-picture img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 50%;
}

.nav-search-users .nav-sr-list .nav-sr-item .nav-sr-item-content .nav-sr-item-name {
    margin-left: 10px;
}

.nav-search-users .nav-sr-list .nav-sr-item .nav-sr-item-content .nav-sr-item-email {
    display: block;
}

.nav-search-users .nav-sr-list .nav-sr-item .nav-sr-item-content .nav-sr-clear-item {
    margin-left: auto;
}

button {
    background: lightblue;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
}

button:hover {
    opacity: 0.5;
}
<div class="nav-search-users">
    <div class="nav-sr-header">
        <div class="nav-sr-h-title">
            <span>All users</span>
        </div>
        <div class="nav-sr-h-more">
            <span>View more</span>
        </div>
    </div>
    <div class="nav-sr-list">
        <div class="nav-sr-item">
            <div class="nav-sr-item-content">
                <div class="nav-sr-item-picture">
                    <img src="https://hips.hearstapps.com/hmg-prod/images/pop-index-2020-chevrolet-corvette-c8-102-1571146873.jpg">
                </div>
                <div>
                  <div class="nav-sr-item-name">
                      <span class="nav-sr-in-username">My name</span>
                  </div>
                  <div class="nav-sr-item-email">
                      <span>email@gmail.com</span>
                  </div>
                </div>
                <div class="nav-sr-clear-item">
                    <button>edit</button>
                </div>
            </div>
        </div>
    </div>
</div>

相关问题