テキストとラインを平行に整列する

Question

テキストと行を含む4つのdivがあります。テキストはサービスコールからのものであり、その内容は異なる場合があります。問題は、線が適切に表示されていないことです。長さが異なります。主な条件は です。1）すべての線が同じポイントで終わる必要があります。 2）余白から右に30px、右に としてください。3）テキストとラインの間隔は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>

私は、最小で試した最大幅が、solution.Canの誰もがよりよい解決策を与えることができない見つけますか？

Answer 1

はこれを試してみてください。

.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>

Answer 2

としてあなたのCSSにいくつかの変更を行います。

.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>

Answer 3

.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>

Answer 4

あなたは、単に親にdisplay:flex;でこれを取得することができます。

このソリューションをお試しください。

.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>

Answer 5

別の方法..

またjqueryを使用してそれを行うことができます。 （あなたの質問にはjqueryタグが存在しないので、二次選択としてこれを取る。）

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

FIDDLE