如何修复网页空格数格式错误？答案

【问题标题】：How to fix webpage number of spaces formatting error?如何修复网页空格数格式错误？
【发布时间】：2020-05-03 01:18:18
【问题描述】：

我想以这种方式对齐网页上的文本：

发行日期：2019 年 3 月 12 日
截止日期：     04/02/2019
网络：              12
邮政信箱编号：           1/3-147

但我是这样理解的：

发行日期：2019 年 3 月 12 日
截止日期：2019 年 4 月 2 日
净：12 邮政信箱编号：1/3-147

如何实现第一种格式而不硬编码空格数而不硬编码空格数？

【问题讨论】：

你试过了吗？例如，您可以使用 flexbox。如果您阅读有关 bootstrap 4 的文档，您会发现很多 flexbox 类的帮助器。我建议从阅读该文档开始，尝试编写解决方案，如果您遇到困难，请在此处显示您的尝试

标签： html css bootstrap-4

【解决方案1】：

给定一个有意义的标记，例如描述列表，您可以使用 display: grid 来实现该布局

这样做您无需为左侧的项目设置width（或min-width），该列将自动适应

dl {
   display: grid;
   grid-template-areas: "c1 c2";
   grid-auto-columns: min-content;
}

dt,dd { margin: 0; }

dt { grid-area: "c1"; white-space: nowrap; }
dd { grid-area: "c2"; padding-left: 10px; }

<dl>
   <dt>Issue-Date</dt>    
   <dd>03/12/2019</dd>
   
   <dt>Due Date</dt>      
   <dd>04/02/2019</dd>
   
   <dt>Net:</dt>               
   <dd>12</dd>
   
   <dt>A really long item</dt>          
   <dd>1/3-147</dd>

   <dt>P.O #</dt>          
   <dd>1/3-147</dd>
</dl>

【讨论】：

【解决方案2】：

您必须使用一些 HTML 标签，例如 div、span 并在它们上应用您的 CSS，这样可以：

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 100px;
            float: left;
        }
    </style>
</head>
<body>

    <div>
        Issue-Date:
    </div>
    <div>
        03/12/2019
    </div>
</body>
</html>

【讨论】：

如果项目的宽度超过 100 像素会怎样？
你也可以像这个 10% 那样按百分比改变它。较小或较大的值会影响面板的宽度，通过更改它，您可以根据您的要求修复视图。