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>

如果有人想知道，{{}}是因为那些变量是以角度绑定到范围的。

无论如何，这就是最终的结果。

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

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

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

有人会知道如何以这种方式对齐事物吗？我不太了解CSS以通过谷歌正确提问，而无法直观地表达我想做的事情。

Answer 1

你的结构看起来很像我的桌子。虽然HTML表有时会被过度使用，但我认为在这种情况下它会产生语义意义，副作用是对齐元素的好方法。

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

以下是一个例子：

＆＃13;

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

＆＃13;

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>

将定界符后的所有元素定位为相等的距离

4 个答案: