Question

我是CSS的新手。我需要做的是对齐两条分开的线，它们可以有不同的数字。我现在拥有的是：

First line: 1,1,1,1 Second: 2,2,2,2

我需要实现的是：

First line: 1,1,1,1 Second: 2,2,2,2

.wrap {
    display: flex; 
}

<div class="wrap">
    <div class="foo">
        <p>First line: 1,1,1,1</p>
        <p>Second: 2,2,2,2</p>
    </div>
</div>

如您所见，这些数字目前不对齐。如果我要添加类似text-align的内容，并且数字会发生变化，那么它们也不会对齐。如何在CSS中这样做？

Answer 1

将文本和数字括起来，并使用CSS将其显示为表格：

.foo {
  display: table
}

.foo p {
  display: table-row;
}

.foo span {
  display: table-cell;
  padding: 0 0.5em;
}

<div class="foo">
  <p>
    <span>First line:</span>
    <span>1,1,1,1</span></p>
  <p>
    <span>Second:</span>
    <span>2,2,2,2</span>
  </p>
</div>

Answer 2

    <p style="display:block; width:130px; background-color:red; "> First line: <span style="float:right">1,1,1,1</span></p>
    <p style="display:block; width:130px; background-color:red;">Second:<span style="float:right">2,2,2,2</span></p>

使用显示块和宽度将它们分别放在单独的行中

如果要使用flex：

 <body style="diplay:flex">
    <p style=" width:130px; background-color:red; "> First line: <span style="float:right">1,1,1,1</span></p>
    <p style="width:130px; background-color:red;">Second:<span style="float:right">2,2,2,2</span></p>
</body>

如何对齐2个分隔的行号？

2 个答案: