在页面左侧显示第一列的4行

Question

我们在page

中有4行显示

我们希望将第一列的所有文本移至左侧和右侧。将所有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>

我正在尝试`position：relative＆amp;左，右像素，但我需要使用大量的代码。

Answer 1

检查下面的html，它可能对你有帮助。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

这是真正的表格数据，因此实际的table是最好的，但CSS表可以通过轻微的HTML结构更改来管理它。

在div中包装每个段落和关联的span，这些包装器可以作为表行。

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