表示ページの左側にある最初の列の4行

Question

我々はこのように表示する4つのラインを持っているpage

に、我々はすべての4コロンを保つ&を左に最初の列のすべてのテキストを移動したい[: ]同じ行に

<div class="all-link"> 
<p>Delivery :</p> 
<span><a href="http://www.delhivery.com/ " target="_blank">Delivery.com</a></span> 
<div style="clear: both; height: 0px;">&nbsp;</div> 
<p>Parcelled.in:</p> 
<span><a href="http://parcelled.in/track" target="_blank">Parcelled.in</a></span> 
<div style="clear: both; height: 0px;">&nbsp;</div> 
<p>DTDC:</p> 
<span><a href="http://dtdc.in/" target="_blank">DTDC</a></span> 
<div style="clear: both; height: 0px;">&nbsp;</div> 
<p>Speed Post:</p> 
<span><a href="http://www.indiapost.gov.in/speednettracking.aspx" target="_blank">Speed Post</a></span> 
<div style="clear: both; height: 0px;">&nbsp;</div> 
</div> 

私は `位置にしようとしています：相対&左、右のピクセルが、私は、そのために多くのコードを使用する必要があります。

Answer 1

THSので、実際のtableがベストだろうが、CSSのテーブルは、わずかなHTMLの構造変化でこれを管理することができ、本当に表形式のデータです。

各段落を折り返してdivのスパンを関連付けます。これらのラッパーは、表の行として機能できます。

.all-link { 
 
    display: table; 
 
    margin: 1em; 
 
} 
 

 
.all-link .row { 
 
    display: table-row; 
 
} 
 

 
.all-link .row p, 
 
.all-link .row span { 
 
    display: table-cell; 
 
    padding: .25em; 
 
    border:1px solid lightgrey; 
 
} 
 

 
.all-link .row p { 
 
    text-align: right; 
 
}

<div class="all-link"> 
 
<div class="row"> 
 
    <p>Delivery :</p> 
 
    <span><a href="http://www.delhivery.com/ " target="_blank">Delivery.com</a></span> 
 
</div> 
 

 
<div class="row"><p>Parcelled.in:</p> 
 
    <span><a href="http://parcelled.in/track" target="_blank">Parcelled.in</a></span> 
 
    </div> 
 
<div class="row"> 
 
    <p>DTDC:</p> 
 
    <span><a href="http://dtdc.in/" target="_blank">DTDC</a></span> 
 
</div> 
 

 
<div class="row"> 
 
    <p>Speed Post:</p> 
 
    <span><a href="http://www.indiapost.gov.in/speednettracking.aspx" target="_blank">Speed Post</a></span> 
 
</div> 
 
</div>

Answer 2

下記をご確認ください。

<div class="all-link"> 
 
<p style="display: inline-block;margin: 0;text-align: left !important;width: 90px;">Delivery <b style="float:right">:</b></p> 
 
<span><a href="http://www.delhivery.com/ " target="_blank">Delivery.com</a></span> 
 
<div style="clear: both; height: 0px;">&nbsp;</div> 
 
<p style="display: inline-block;margin: 0;text-align: left !important;width: 90px;">Parcelled.in <b style="float:right">:</b></p> 
 
<span><a href="http://parcelled.in/track" target="_blank">Parcelled.in</a></span> 
 
<div style="clear: both; height: 0px;">&nbsp;</div> 
 
<p style="display: inline-block;margin: 0;text-align: left !important;width: 90px;">DTDC <b style="float:right">:</b></p> 
 
<span><a href="http://dtdc.in/" target="_blank">DTDC</a></span> 
 
<div style="clear: both; height: 0px;">&nbsp;</div> 
 
<p style="display: inline-block;margin: 0;text-align: left !important;width: 90px;">Speed Post <b style="float:right">:</b></p> 
 
<span><a href="http://www.indiapost.gov.in/speednettracking.aspx" target="_blank">Speed Post</a></span> 
 
<div style="clear: both; height: 0px;">&nbsp;</div> 
 
</div>