html - 如何使用图标和缩进布局 html 文本

Question

我需要一个 html/css 示例，它给出以下结果

23:59 icon Some text which can wrap
           like this
      icon Some text which can wrap
           like this

所以有 2 行。第一行以时间开头。第二行缩进相同的宽度，以便图标对齐。图标比文字大一点只是为了让事情变得棘手。每个图标的右边是一些可以与自身对齐的文本。

非常感谢一些如何做到这一点的想法。

我也在寻找如何将 2 个图标与垂直线连接起来的建议，这样如果图标是圆圈，那么整个图标就会显示为垂直杠铃。但这可能太麻烦了

Answer 1

将内容保存在它们受尊重的 div 中，并将它们 float 到您想要的位置。

.wrapper {
    float: left;
}

div {
    padding-right: 5px;
}

span {
  float: right;
  padding-left: 15px;
  width: 180px;
}

<div class="wrapper">
    <div>
        23:59
    </div>
</div>
<div class="wrapper">
    <div>
        icon
        <span>Some text which can wrap like this</span>
    </div>
    <div class="wrapper">
        icon
        <span>Some text which can wrap like this</span>
    </div>
</div>