首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何使用图标和缩进对html文本进行布局

如何使用图标和缩进对html文本进行布局
EN

Stack Overflow用户
提问于 2019-05-10 03:12:23
回答 3查看 113关注 0票数 0

我需要一个示例html/css,它提供以下结果

代码语言:javascript
复制
23:59 icon Some text which can wrap
           like this
      icon Some text which can wrap
           like this

所以有两行代码。第一行以时间开头。第二行缩进相同的宽度,以便图标对齐。图标比文本稍大一点,只是为了让事情变得更棘手。在每个图标的右边是一些可以自动对齐的文本。

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

我也在寻找一个建议如何连接2个图标与垂直线,以便如果图标是圆,那么整个事情将出现为垂直杠铃。但这可能太麻烦了

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2019-05-10 03:45:28

如果我没理解错的话,我认为Flex-Box应该可以工作。也许你可以看看css-ticks来获得一些灵感。

这应该是可行的:

代码语言:javascript
复制
.flex-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}

i {
  font-size: 2rem
}

div {
  padding: 6px
}
代码语言:javascript
复制
<link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet"/>

<div class="flex-row">
  <div>12:30</div>
  <div>
    <i class="fas fa-check"></i>
  </div>
  <div>Lorem ipsum dolor set amet..</div>
</div>

<div class="flex-row">
  <div>12:30</div>
  <div>
    <i class="fas fa-times"></i>
  </div>
  <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam..</div>
</div>

票数 0
EN

Stack Overflow用户

发布于 2019-05-10 03:36:53

把东西放在它们受人尊敬的div中,然后把它们放在你想放的地方。

代码语言:javascript
复制
.wrapper {
    float: left;
}

div {
    padding-right: 5px;
}

span {
  float: right;
  padding-left: 15px;
  width: 180px;
}
代码语言:javascript
复制
<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>

票数 1
EN

Stack Overflow用户

发布于 2019-05-10 03:34:30

您可以使用table轻松实现该布局。

为了用垂直线连接两个图标,我会使用伪选择器。

代码语言:javascript
复制
/* Selects pseudo element :before on every second icon */
.icon:nth-child(even)::before {
 content: '';
 display: block;
 width: 1px;
 height: 20px;
 background: #000;
 position: relative;
 top: -20px;
}

它需要一些调整,但你已经有了想法。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56066145

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档