对齐文本行

我在div中有6行文本。每行都有一个<li>标签。文字垂直不对齐。对齐文本行

是否有办法垂直对齐文本。

2017-08-17 Nees

你的意思是一致的破折号？如果是，则必须使用[等宽字体]（https://en.wikipedia.org/wiki/Monospaced_font）。 – ponsfrilus

它似乎垂直对齐。你的意思是水平不对齐？ – litelite

啊，是的。我的意思是水平对齐。但也垂直。破折号都在彼此之下。 – Nees

您可以使用<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>

来源

2017-08-17 19:18:33 ponsfrilus

Thx中放置[mcve] **，看起来不错。但是，当我在代码标记中放置一个类时，它不起作用。我能做些什么？ – Nees

使用'标签'，它至少包含以下内容：'font-family：monospace;'。见https://jsfiddle.net/s2k8zt1a/1/ – ponsfrilus

你可以使用预先定义的宽度<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>

只要记住还有诸如引导或一些更轻巧，对于这种事情很好的解决方案在那里仍然提供网格和文本对齐。

来源

2017-08-17 19:13:11

回答

相关问题