我尝试做一个表格,我需要显示用户。我已经做了所有的确定,但我希望电子邮件地址下的用户名,但我不明白如何才能使这种情况发生时,使用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>
1条答案
按热度按时间3wabscal1#
只需将它们 Package 在另一个div中: