如何使用图标和缩进对html文本进行布局
如何使用图标和缩进对html文本进行布局
提问于 2019-05-10 03:12:23
我需要一个示例html/css，它提供以下结果
23:59 icon Some text which can wrap
like this
icon Some text which can wrap
like this所以有两行代码。第一行以时间开头。第二行缩进相同的宽度，以便图标对齐。图标比文本稍大一点，只是为了让事情变得更棘手。在每个图标的右边是一些可以自动对齐的文本。
会非常感谢一些如何做到这一点的想法。
我也在寻找一个建议如何连接2个图标与垂直线，以便如果图标是圆，那么整个事情将出现为垂直杠铃。但这可能太麻烦了
回答 3
Stack Overflow用户
回答已采纳
发布于 2019-05-10 03:45:28
如果我没理解错的话，我认为Flex-Box应该可以工作。也许你可以看看css-ticks来获得一些灵感。
这应该是可行的：
.flex-row {
display: flex;
flex-wrap: nowrap;
align-items: center;
}
i {
font-size: 2rem
}
div {
padding: 6px
}<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>
Stack Overflow用户
发布于 2019-05-10 03:36:53
把东西放在它们受人尊敬的div中，然后把它们放在你想放的地方。
.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>
Stack Overflow用户
发布于 2019-05-10 03:34:30
您可以使用table轻松实现该布局。
为了用垂直线连接两个图标，我会使用伪选择器。
/* 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;
}它需要一些调整，但你已经有了想法。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56066145
复制相关文章
相似问题
腾讯云开发者
