GitHub 6956★

Have you seen CSS Scan?

The fastest and easiest way to check, copy and edit CSS.

Learn more →

CSS Scan logo

Menu

HTML

<div class="menu">
<!-- Normal menu item -->
<div class="menu__item">...</div>

<!-- With hot key -->
<div class="menu__item">
<!-- Label -->
...
<!-- Hot key -->
<div class="menu__hotkey">...</div>
</div>

<!-- With image and hot key -->
<div class="menu__item">
<!-- Image -->
...

<!-- Label -->
...

<!-- Hot key -->
<div class="menu__hotkey">...</div>
</div>

<!-- Divider -->
<div class="menu__divider"></div>
</div>

CSS

.menu {
display: flex;
flex-direction: column;

/* Border */
border: 1px solid #d1d5db;
border-radius: 0.25rem;
}

.menu__item {
/* Center the content horizontally */
align-items: center;
display: flex;
}

.menu__hotkey {
/* Push the hot key to the right */
margin-left: auto;
}

.menu__divider {
border-bottom: 1px solid #d1d5db;
height: 1px;
}
Demo
Follow me on and to get more useful contents.