对齐文本行

Question

我在div中有6行文字。每行都在<li>标记中。 文本垂直未对齐。

有没有办法垂直对齐文字。

Answer 1

您可以使用<code>标记来对齐版本，例如：

<b>Serie 1:</b>
<ul>
  <li><code>1.07a</code> - <a href="#">Lijnentekening</a>;</li>
  <li><code>1.07b</code> - <a href="#">Gebouw</a>;</li>
  <li><code>1.07c</code> - <a href="#">Precisietekening</a>;</li>
  <li><code>1.07d</code> - <a href="#">Kunst</a>;</li>
  <li><code>1.07e</code> - <a href="#">Meselwerk</a>;</li>
  <li><code>1.07f</code> - <a href="#">Kozijndetail</a>;</li>
</ul>

Answer 2

您可以将<li>text - more text</li>元素拆分为多个具有预定义宽度的跨度，例如

<li>
    <div style="width: 100px;display: inline-block;">text</div>
    <div style="width: 25px;display: inline-block;">-</div> 
    <div style="width: 100px;display: inline-block;">more text</div>
</li>

请记住，有很好的解决方案可以解决这类问题，例如bootstrap或更轻量级的东西，它们仍然提供网格和文本对齐。