如何从同一位置开始不同行中的文本?HTML / CSS

Question

我的html代码有问题

我有文本，看起来像这样:

abcdefgeh aaaaa
sudbaufsfowu aaaaa
subbfdb aaaa
ubsudfbfo aaaa
isnidfnfin aaaa
isndindinsin aaaa

但是我想让它看起来像这样:

abcdefgeh     aaaaa
sudbaufsfowu  aaaaa
subbfdb       aaaaa
ubsudfbfo     aaaaa
isnidfnfin    aaaaa
isndindinsin  aaaaa

我该怎么做?提前感谢，约翰·

Answer 1

也许使用表格?

<table>
<tr>
<td>abcdefgeh</td>
<td>aaaaa</td>
</tr>
<tr>
<td>sudbaufsfowu</td>
<td>aaaaa</td>
</tr>
<tr>
<td>subbfdb</td>
<td>aaaaa</td>
</tr>
<tr>
<td>ubsudfbfo</td>
<td>aaaaa</td>
</tr>
<tr>
<td>isnidfnfin</td>
<td>aaaaa</td>
</tr>
<tr>
<td>isndindinsin</td>
<td>aaaaa</td>
</tr>
</table>

Answer 2

有几种方法可以做到。与表或网格。这里是CSS网格系统。

.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
gap: 0px 0px;
grid-auto-flow: row;
grid-template-areas:
". .";
}

<div class="container">
<div>
aaaaaaa
</div>
<div>
bbbbbb
</div>
</div>

Answer 3

默认情况下，HTML将多个空格视为一个空格。

如果你想让你的间距以固定的宽度显示出来，并保留你已经在数据字段之间插入的空间，你可以考虑使用<pre>标记:

<>以前abcdefgeh五星级sudbaufsfowu五星级subbfdb五星级ubsudfbfo五星级isnidfnfin五星级如果您的数据中已经没有空格，您可以考虑使用已经建议的<table>，或者，也许，用awk编写脚本来插入所需的空格数量，然后使用<pre>标记。如果不使用表格(或其他类似的布局对象)，您可能需要使用固定宽度的字体，以确保跨浏览器的一致性。

Answer 4

您也可以尝试这样做。

p {
margin: 0;
}
p span {
display: inline-block;
min-width: 120px
}

<p> <span> abcdefgeh </span>     aaaaa<p>
<p> <span> sudbaufsfowu </span>  aaaaa<p>
<p> <span> subbfdb </span>       aaaaa<p>
<p> <span> ubsudfbfo </span>     aaaaa<p>
<p> <span> isnidfnfin </span>    aaaaa<p>
<p> <span> isndindinsin </span>  aaaaa<p>