CODEWITHSUNDEEP
htmlcss
Hema Nandagopal
Hema Nandagopal

Reputation: 678

Aligning a text and line parallel

enter image description here

There are 4 div's which has text and a line. The text will be coming from the service call and it may vary. The issue is that the line is not properly displayed it is of different length.The main condition is 1)All the line should end at the same point. 2)The line should be of 30px right from the margin and 3)The gap between the text and line should be 12px.

.about{
    display: inline-block;
}
hr{
  display:inline-block;
  width:200px;
}
<div>

<div class="about">Chapter</div><hr/></div>
<div>
<div class="about">Learning Objectives</div><hr/></div>
<div>
<div class="about">Pages</div><hr/></div>
<div>
<div class="about">Sections</div><hr/></div>

I tried with min,max-width but unable find a solution.Can anyone give a better solution?

Upvotes: 0

Views: 1193

Answers (5)

Lalji Tadhani
Lalji Tadhani

Reputation: 14149

Make some changes to your CSS as:

.about {
  display: inline-block;
  vertical-align: top;
  margin-right: 12px;
}
hr{
  display:inline-block;
  width:200px;
  margin-bottom:0;
}


.about {
  display: inline-block;
  margin-right:12px;
  vertical-align: top;
}
hr{
  display:inline-block;
  width:200px;
  margin-bottom:0;
}
<div>
  <div class="about">Chapter</div><hr/>
</div>
<div>
  <div class="about">Learning Objectives</div><hr/>
</div>  
<div>
  <div class="about">Pages</div><hr/>
</div>  
<div>
  <div class="about">hhhhhhhhhhhhhhh</div><hr/>
</div>

Upvotes: 0

Deepu Sasidharan
Deepu Sasidharan

Reputation: 5309

Another way..

You can do it using jquery also. ( Since there is no jquery tag in your question, take this as a secondary choice.)

$("hr").each(function() {
  var abtwidth = $(this).parent().find(".about").width();
  var hrwidth = 300 - abtwidth;
  $(this).css('width',hrwidth);
});

FIDDLE

Upvotes: 0

Znaneswar
Znaneswar

Reputation: 3387

You can get this simply with display:flex; to parent.

Try this solution.

.align{
   display:flex;
}

.about{
   padding-right:12px;

}
hr{
  width:200px;
     margin-left: 0px;
}
<div class="align">

<div class="about">Chapter</div><hr /></div>
<div class="align">
<div class="about">Learning Objectives</div><hr/></div>
<div class="align">
<div class="about">Pages</div><hr/></div>
<div class="align">
<div class="about">hhhhhhhhhhhhhhh</div><hr/></div>

Upvotes: 0

ankita patel
ankita patel

Reputation: 4251

Try this.

.about {
  float: left;  
}
hr {
  width: auto;
  margin-left: 30px;
}
.test {
  overflow: hidden;
}
<div class="test">
  <div class="about">Chapter</div>
  <hr/>
</div>
<div class="test">
  <div class="about">Learning Objectives</div>
  <hr/>
</div>
<div class="test">
  <div class="about">Pages</div>
  <hr/>
</div>
<div class="test">
  <div class="about">hhhhhhhhhhhhhhh</div>
  <hr/>
</div>

Upvotes: 1

Saw Zin Min Tun
Saw Zin Min Tun

Reputation: 642

.about{
  display: inline-block;
}
hr{
  display: inline-block;
  width: 200px;
  margin-left: 10px;
  margin-bottom: 3px;
}
<div>

<div class="about">Chapter</div><hr/></div>
<div>
<div class="about">Learning Objectives</div><hr/></div>
<div>
<div class="about">Pages</div><hr/></div>
<div>
<div class="about">hhhhhhhhhhhhhhh</div><hr/></div>

Upvotes: 0

Related Questions