如何解决对齐具有不同宽度的特定文本?
请参阅代码段,如何对齐文本以使 em {
margin-left: 25px;
}
都在同一行上?
像这样
<p>Design: <em>lorem ipsum</em></p>
<p>Designsssss: <em>loremloremloremloremipsum</em></p>
<p>Designszzzzzzzzz: <em>ipsum lorem</em></p>
<p>Design and develomment: <em>ipsum</em></p>
source venv/bin/activate
解决方法
p {
display: flex;
}
em {
margin-left: auto;
width: 50%;
}
<p>Design: <em>lorem ipsum</em></p>
<p>Designsssss: <em>loremloremloremloremipsum</em></p>
<p>Designszzzzzzzzz: <em>ipsum lorem</em></p>
<p>Design and develomment: <em>ipsum</em></p>
CSS 表格可以做到这一点:
p {
display: table-row;
}
em {
display: table-cell;
padding-left: 1em;
}
<p>Design: <em>lorem ipsum</em></p>
<p>Designsssss: <em>loremloremloremloremipsum</em></p>
<p>Designszzzzzzzzz: <em>ipsum lorem</em></p>
<p>Design and develomment: <em>ipsum</em></p>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。