如何在新行上缩进

Question

我试图将文本缩进，只要它被推到一个新行（由于屏幕调整大小）。 我一直在摆弄它已经有一段时间但是像：display：block似乎并没有为我做这件事。 有谁知道如何在每个新行上缩进文本？

我使用以下HTML代码：

<ul class="sortable ui-sortable list-group">
    @foreach (UIBookmark b in Model.Bookmarks)
    {
        <li class="bookmark-card ui-sortable-handle" id="@b.Id">
            <form class="form-button" action="/Api/Bookmarks/@b.Id" method="DELETE">
            <a href="#" class="link-submit">
            <span class="ql glyphicon glyphicon-star" />
            </a>
            </form>

            <span>@Quick.LinkForLinkable(Html, b.Target)</span>
        <p class="text-muted revision-date">&#8195;&#8195;&#8195;<i class="glyphicon-glyphicon-chevron-right"></i>@b.Target.GetTypeDisplay()</p>
    </li>
    }
</ul>

Answer 1

您可以在明星元素上应用margin-bottom。那应该有帮助

Answer 2

有几种方法可以做到，其中包括：

• 表

＆＃13;

＆＃13;

td {
  border: blue solid 2px;
  max-width: 160px;
  vertical-align: top;
}

＆＃13;

<table>
  <tbody>
    <tr>
      <td>★</td>
      <td>contract manufacturing companies</td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

• Flexbox的

＆＃13;

＆＃13;

.container {
  max-width: 180px;
  display: flex;
}
.container div {
  border: blue solid 2px;
}

＆＃13;

<div class="container">
  <div>★</div>
  <div>contract manufacturing companies</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以使用伪类:before添加星形图像，并使li显示flex。外容器不需要弯曲。

＆＃13;

＆＃13;

.container {
  max-width: 180px;
}
.container li {
  list-style: none;
  color: #0095ff;
  display: flex;
}
.container li:before {
  content: "\2605";
}
label{  
  padding-left:5px;
}

＆＃13;

<ul class="container">
  <li>
    <label>contract manufacturing companies</label>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;