Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Make div width same as its content width [duplicate]

Tags:

html

css

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

like image 788
Treesa Avatar asked Jul 20 '17 07:07

Treesa


People also ask

How can I make div width and content the same?

Using inline-block property: Use display: inline-block property to set a div size according to its content.

How do I make div width auto adjust?

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.

How do you make div width and height auto adjust to content?

Syntax: height: length|percentage|auto|initial|inherit; Property Values: height: auto; It is used to set height property to its default value.

Does width 100% include padding?

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.


1 Answers

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>
like image 187
Rohit Verma Avatar answered Oct 14 '22 00:10

Rohit Verma