主页 / 问题 / 1604278
Accepted
ОнСамый
Asked:2025-01-07 18:56:51 +0000 UTC2025-01-07 18:56:51 +0000 UTC

换行时左缩进 bootstrap3/css

  • 772

大家好。

我有一个分配有填充的文本块。调整时，文本会移动到另一行。我试图在换行后缩进并逐个字母对齐文本，就像我附加的屏幕截图中的红线一样： 屏幕

<div class="row">
   <div class="col-sm-6">
       <p><i class="fas fa fa-map-marker-alt fa-lg"></i><i style="padding: 0px 8px;">Mвывы. вввввв Lвыв</i><br>
           <i style="padding: 0px 13px;"></i>Пушкина 85<br><i style="padding: 0px 13px;"></i>ОП мира<br><i style="padding: 0px 13px;"></i>РФ<br> 
           <i class="fas fa-info fa-lg"></i><i style="padding: 0px 15px; line-height: 1.7rem; pointer-events: none;">dsdsdsds<br></i></p>
   </div>
   <div class="col-sm-6">
       <p><i class="fas fa-phone-volume fa-lg"></i><a style="padding: 0px 5px; cursor:pointer;" href="tel:+420776674190"></a>+7 84785488757<br>
           <i class="fas fa-solid fa-at fa-lg"></i><a class="test" style="padding: 0px 8px;" href="mailto:[email protected]">[email protected]</a></p>
   </div>
</div>
css

2 个回答

  1. 摆脱引导程序——它只会带来伤害。摆脱这些“ <i></i>”——这是怎么回事？为了什么？只需将带有背景的伪元素以图标的形式添加到链接中，这在 css 中非常简单

    • 0
  2. Best Answer

    现在有更现代的方法，如 flex 或 grid，但我仍然会向您展示一个有趣的经典选项：

    p {
  padding-left: 2em;
  text-indent: -2em;
}

i {
  display: inline-block;
  width: 1.5em;
  margin: -.25em .5em -.25em 0;
  aspect-ratio: 1;
  border-radius: 50%;
  background: silver;
  vertical-align: middle;
}
    <p><i></i>При адаптации происходит перенос текста на другую строку. При адаптации происходит перенос текста на другую строку. При адаптации происходит перенос текста на другую строку. При адаптации происходит перенос текста на другую строку. При адаптации происходит перенос текста на другую строку.</p>

    • 0

相关问题