Menu
I have attached a fiddle link to this question. I need the red dot to be closer to the text. For the first & last item, it works well..but if any item is multi line..it has extra whitespace at the right..i want the dot to be closer to the text for the second item also.I tried flex:0 but it makes the whole text area smaller.Please help!
<div class="container">
<div class="item">
<span class="icon">1</span>
<div class="text">News Section</div>
<span class="red"></span>
</div>
<div class="item">
<span class="icon">2</span>
<div class="text">Sample123 Organizational announcement</div>
<span class="red"></span>
</div>
<div class="item">
<span class="icon">3</span>
<div class="text">Sample Text</div>
<span class="red"></span>
</div>
</div>
.container {
width:300px;
padding: .5em 1em;
}
.item {
display: flex;
}
.icon {
width: 18px;
float: left;
}
.text {
display: inline-block;
background: yellow;
}
.red {
margin: 0 0 0 0.5rem !important;
background: #FF0000;
padding: 0 !important;
width: .5rem;
height: .5rem;
border-radius: 50%;
}
Link to fiddle
788
Using inline-block property: Use display: inline-block property to set a div size according to its content.
Using width, max-width and margin: auto; Then, you can set the margins to auto, to horizontally center the element within its container. The element will take up the specified width, and the remaining space will be split equally between the two margins: This <div> element has a width of 500px, and margin set to auto.
Syntax: height: length|percentage|auto|initial|inherit; Property Values: height: auto; It is used to set height property to its default value.
What is meant by width 100%? if you specify width:100%, the element's total width will be 100% of its containing block plus any horizontal margin, padding and border.
Use white-space: nowrap; inside .text class it's working.
.container {
width:300px;
padding: .5em 1em;
}
.item {
display: inline-flex;
}
.icon {
width: 18px;
float: left;
}
.text {
display: inline-block;
background: yellow;
white-space: nowrap;
}
.red {
margin: 0 0 0 0.5rem !important;
background: #FF0000;
padding: 0 !important;
width: .5rem;
height: .5rem;
border-radius: 50%;
}<div class="container">
<div class="item">
<span class="icon">1</span>
<div class="text">News Section</div>
<span class="red"></span>
</div>
<div class="item">
<span class="icon">2</span>
<div class="text">Sample123 Organizational announcement</div>
<span class="red"></span>
</div>
<div class="item">
<span class="icon">3</span>
<div class="text">Sample Text</div>
<span class="red"></span>
</div>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
