I'm trying to make a table where I need to display users. I've made all ok but I want the email address to be under the username, but I can't understand how can I make this happen when using flexbox.
I've tried to add display: block
to the email div but it doesn't work.
Can you guys help me? Thanks!
* {
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 >
<div >
<div >
<span>All users</span>
</div>
<div >
<span>View more</span>
</div>
</div>
<div >
<div >
<div >
<div >
<img src="https://hips.hearstapps.com/hmg-prod/images/pop-index-2020-chevrolet-corvette-c8-102-1571146873.jpg">
</div>
<div >
<span >My name</span>
</div>
<div >
<span>[email protected]</span>
</div>
<div >
<button>edit</button>
</div>
</div>
</div>
</div>
</div>
CodePudding user response:
Just wrap them in another 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 >
<div >
<div >
<span>All users</span>
</div>
<div >
<span>View more</span>
</div>
</div>
<div >
<div >
<div >
<div >
<img src="https://hips.hearstapps.com/hmg-prod/images/pop-index-2020-chevrolet-corvette-c8-102-1571146873.jpg">
</div>
<div>
<div >
<span >My name</span>
</div>
<div >
<span>[email protected]</span>
</div>
</div>
<div >
<button>edit</button>
</div>
</div>
</div>
</div>
</div>