html - 在第一行之后缩进和对齐行

Question

我有以下文本 block 。

我想缩进黄色文本，以便所有黄线都在其左边缘对齐。

根据另一个答案，我尝试了 text-indent:-3em;padding-left:3em;，但这只会影响第一行之后的后续行。

这可以使用 CSS 完成吗？还是需要另建一张表？

这是一个例子。它只是一行标记。

<td>PC: <span style="font-size:smaller;">US 104 Key (ANSI), DE 105 Key (ISO), FR 105 Key (ISO), UK 105 Key (ISO), ES 105 Key (ISO), US 104 Key (Dvorak)</span><br/>Mac: <span style="font-size:smaller;">US 109 Key (A1048), US 109 Key (A1243), UK 110 Key (A1048)</span></td>

除了我在发布时删除了链接。

Answer 1

可以改进和扩展您引用的无效解决方案以实现您所追求的目标:

.x {
  position: relative;
  left: 3em;
  width: calc(100% - 3em);
  color: green;
}

.y {
  display: inline-block;
  margin-left: -3em;
  width: 3em;
  color: red;
}

<div class="x">
  <div class="y">PC:</div>lkj sdflkj sdflkj sdflkj sdlfkj lsdkfj lksdjf lkjsd flkj sdflkj sdlfkj sdlfkj sdlfkj sldkfj lsdkjf lskdjf lkj sdflkj sdflkj sdflkj sdlfkj lsdkfj lksdjf lkjsd flkj sdflkj sdlfkj sdlfkj sdlfkj sldkfj lsdkjf lskdjf lkj sdflkj sdflkj sdflkj sdlfkj
  lsdkfj lksdjf lkjsd flkj sdflkj sdlfkj sdlfkj sdlfkj sldkfj lsdkjf lskdjf </div>
<div class="x">
  <div class="y">MAC:</div>lkj sdflkj sdflkj sdflkj sdlfkj lsdkfj lksdjf lkjsd flkj sdflkj sdlfkj sdlfkj sdlfkj sldkfj lsdkjf lskdjf lkj sdflkj sdflkj sdflkj sdlfkj lsdkfj lksdjf lkjsd flkj sdflkj sdlfkj sdlfkj sdlfkj sldkfj lsdkjf lskdjf lkj sdflkj sdflkj sdflkj sdlfkj
  lsdkfj lksdjf lkjsd flkj sdflkj sdlfkj sdlfkj sdlfkj sldkfj lsdkjf lskdjf lkj sdflkj sdflkj sdflkj sdlfkj lsdkfj lksdjf lkjsd flkj sdflkj sdlfkj sdlfkj sdlfkj sldkfj lsdkjf lskdjf </div>