How can I create a ul>li>span
style something like image blow?
I wanna push span
to the left of li element.
HTML Code:
<ul>
<li>test<span>3</span></li>
<li>foo<span>5</span></li>
<li>bar<span>4</span></li>
</ul>
my current style:
ul{
display: flex;
flex-direction: column;
}
I'm looking for solution with only flexbox
and without using float:left;
thanks.
With flexbox and without float.
ul {
display: flex;
flex-direction: column;
color: #fff;
font-family: arial;
list-style: none;
padding: 0;
background: #4a90e2;
border-radius: 5px;
padding: 6px;
}
ul li {
background: #285b97;
border-radius: 3px;
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
padding: 5px 10px 5px 5px;
margin: 5px;
}
span {
display: flex;
padding: 3px 6px;
justify-content: flex-start;
color: #285b97;
font-size: 10px;
align-self: flex-start;
text-transform: uppercase;
background: #acd2ff;
border-radius: 2px;
letter-spacing: 1px;
}
<ul>
<li>test<span>span</span></li>
<li>foo<span>span</span></li>
<li>bar<span>span</span></li>
</ul>
You can use display: flex
on li
and change order of span
to -1
so it shows at first element.
ul {
display: flex;
flex-direction: column;
background: #4A90E2;
padding: 10px;
list-style: none;
}
li {
display: flex;
background: #285B97;
justify-content: space-between;
align-items: center;
color: white;
padding: 10px;
margin: 5px
}
span {
background: #ACD2FF;
order: -1;
padding: 5px;
color: #285B97;
}
<ul>
<li>li<span>span</span></li>
<li>li<span>span</span></li>
<li>li<span>span</span></li>
</ul>
Firebase Cloud Functions: PubSub, "res.on is not a function"
TypeError: Cannot read properties of undefined (reading 'createMessageComponentCollector')
I'm looking for a bootstrap code snippet to implement the animated incremental counters shown at the end of this template
I don't mean syntax highlighting in code blocks but rather inline code like: this is an inline codeI think it might have to do with the _sass folder css files, but I can't find a specific code in this repository I forked that would change the coloring...
When I try to use select2 and remodal together, select2 dropdown is overlapping on remodal frameI tried to change z-index of both but I failed to make it work