在 HTML 中水平对齐同一行上的文本答案

【问题标题】：Aligning text on the same line horizontally in HTML在 HTML 中水平对齐同一行上的文本
【发布时间】：2021-11-11 06:01:09
【问题描述】：

我想创建一些文字like this.

我使用了这段代码，但它不起作用：

woman <span style="padding-left:40px"> TextTextTextText</span> <br>
Man <span style="padding-left:40px"> TextTextTextText</span>

我应该改用什么？

【问题讨论】：

标签： html alignment text-align

【解决方案1】：

<style>
    table {
        border: 0;
        border-collapse: collapse;
    }

    .pl-40 {
        padding-left: 40px;
    }
</style>

<!DOCTYPE html>
<html>
<body>
    <table>
        <tr>
            <td>Woman</td>
            <td class="pl-40">TextTextTextText</td>
        </tr>
        <tr>
            <td>Man</td>
            <td class="pl-40">TextTextTextText</td>
        </tr>
    </table>
</body>
</html>

【讨论】：

【解决方案2】：

您可能想要使用表格：

.left {
  text-align: left;
}

.right {
  text-align: right;
}

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
    <table>
        <tbody>
            <tr>
                <td class="left">Woman</td>
                <td class="right">TextTextTextTop</td>
            </tr>
            <tr>
                <td class="left">Man</td>
                <td class="right">TextTextTextBottom</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

如果您希望它们之间有更多的空间，那么您可以在 CSS 中的 .left 声明中添加 padding-right: 40px;：

.left {
  text-align: left;
  padding-right: 40px;
}

作为Prem Signh said in his answer，您可以使用<table style="border: 0; border-collapse: collapse;">而不是<table>隐藏边框。

【讨论】：

【解决方案3】：

尝试使用这样的东西：

.left {
  display: inline-block;
  width: 50px;
}
.right {
  padding-left: 40px;
}

<div>
  <span class="left">woman</span>
  <span class="right">TextTextTextText</span>
</div>
<div>
  <span class="left">Man</span>
  <span class="right">TextTextTextText</span>
</div>

【讨论】：