将所有元素放在定界符之后等距

Question

我正在学习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>

万一有人想知道，{{}} 是因为这些是绑定到 angular 范围的变量。

总之，结果就是这样。

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

因为字段名称的长度不同，所以冒号后的每个字段的文本显然会从开始的地方有所不同。我想要的是这样的。

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

谁知道如何以这种方式对齐事物？我对 CSS 的了解不够，无法通过 google 正确地提出问题，而无法直观地表达我想做的事情。

Answer 1

我觉得你的结构很像 table。尽管 HTML table 有时会被过度使用，但我认为在这种情况下它具有语义意义，并且副作用是对齐元素的好方法。

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

这是一个例子：

<h2> "{{title}}" </h2>
<table>
  <tr>
    <td>
      Path:
    </td>
    <td>
      "{{path_name}}"
    </td>
  </tr>
  <tr>
    <td>
      Last Updated:
    </td>
    <td>
      "{{last_updated}}"
    </td>
  </tr>
  <tr>
    <td>
      Parent:
    </td>
    <td>
      "{{parent}}"
    </td>
  </tr>
</table>

Answer 2

您可以使用：float 或 display:inline-block 并调整您的 <b>

浮动：

h4  b {float:left;width:6.5em;}

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

内联块

h4  b {display:inline-block;width:6.5em;}

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

Answer 3

首先，您应该在 html 中使用语义标签（即 <strong> 而不是 <b>），但坚持使用您提供的代码，您可以执行以下操作:

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

Answer 4

将每个列表放在单独的 DIV 中。将宽度设置为左侧的宽度，以容纳列表所需的宽度。将它设置为 float:left。右边的框将出现在它旁边。 fiddle

<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>

将所有元素放在定界符之后等距

Position all elements after a delimeter an equal distance

html

css

text

css-position

alignment