Html 将测力仪后的所有元件放置在相等距离处

我正在学习CSS和定位技术

我试着用谷歌搜索，但这是一种特殊情况，我不知道如何提问，只知道键入我想要的结果

这是我的HTML

<h2> "{{title}}" </h2>
<h4><b> Path: </b> "{{path_name}}" </h4>
<h4><b> Last Updated: </b> "{{last_updated}}" </h4> 
<h4><b> Parent: </b> "{{parent}}" </h4>

因为字段的名称长度不同，所以冒号后面的每个字段的文本显然会在开始位置有所不同。我想要的是这样的东西

HELLO
Path:              /abc/def/ghi
Last Updated:      Wednesday
Parent:            /abc/def

---

有人知道如何以这种方式排列事物吗？我对CSS的了解不够，无法通过谷歌恰当地提问，也无法直观地表示我想做什么。

我觉得你的结构很像一张桌子。虽然HTML表格有时被过度使用，但我认为在这种情况下，它在语义上是有意义的，其副作用是作为对齐元素的好方法

这种方法还有一个额外的好处，即不需要在任何元素上定义固定的宽度——表格单元格将自动适应其中任何文本的大小

以下是一个例子：

“{{title}”
路径：
“{{path_name}}”
最近更新：
“{{last_updated}}”
起源：
“{{parent}}”

您可以使用：

浮动

或

显示：内联块

并调整

浮动：

h4b{float:左；宽度：6.5em；}

“{{title}”
路径“{Path_name}}”
上次更新：“{Last_Updated}}”
父项：{{Parent}}

首先，您应该在html中使用语义标记（即

而不是

），但按照提供的代码，您可以执行以下操作：

h4 b {
    display: inline-block;
    width: 100px; // change this to your desired width
}

---

将每个列表放在单独的div中。将左侧的宽度设置为容纳列表所需的宽度。将其设置为浮动：左。右边的框将出现在它旁边。

#左框{
位置：相对位置；
浮动：左；
最小宽度：150px；
边界：1px；
}
#右盒{
}
你好

路径：

上次更新：

起源：
/abc/def/ghi

星期三

/abc/def

无需更改标记，只需将

元素设置为

显示：内联块并给它们一个宽度。表格仅在用于布局时被过度使用。永远不要将它们用于布局，但用于显示数据是100%可以接受的-这就是它们的用途！这是表的一个很好的用法。表是一个非常糟糕的建议。这是过时的。@Durbnpoisin这不是真的，原因就在这个答案和zgood的评论中。请不要传播坏消息！表格是表格数据应该使用的，我想这是真的。值得一提的是，我并没有将其视为“表格数据”，而是将其视为两个需要相邻的列表。一个th单元和一个td单元并排排列是很好的，可读性也很好，它比h2好，将h3跳到h4，在强或em可能有某种意义的地方，b没有意义。（请不要让巨魔走得太远：）谢谢！所有这些答案看起来都很好，所以我选择了最上面的一个。每天学习更多的CSS！：）
h4 b {
    display: inline-block;
    width: 100px; // change this to your desired width
}

<style>
#leftBox{
    position:relative;
    float:left;
        min-width:150px;
    border:1px;
}
#rightBox{

}
</style>
HELLO<br />
<div id="leftBox">
Path:<br />
Last Updated:<br />
Parent:
</div>
<div id="rightBox">
/abc/def/ghi<br />
Wednesday<br />
/abc/def
</div>