Question

我不确定如何使用HTML和CSS的组合来获得以下行为：

foo    = this
foobar = bit
goso   = needs
etcetc = aligning

现在我可以在必要时插入空格（就像我上面所做的那样），但我很确定必须有一种方法可以“自动”执行此操作。

我知道我可以使用表来执行此操作，但不愿意这样做。还有其他方法吗？

我的问题归结为：如何使用HTML / CSS以与办公套件中的标签类似的方式自动垂直对齐文字。

这是一个上下文示例：

<p><span class="a">foo</span> <span class="b">=</span> <span class="c">"abcDeveloper"</span></p>
<p><span class="a">bar</span> <span class="b">=</span> <span class="c">"123"</span></p>
<p><span class="a">foobar</span> <span class="b">=</span> <span class="c">"dfg"</span></p>
<p><span class="a">foobarstar</span> <span class="b">=</span> <span class="c">"456"</span></p>

在这个例子中，我希望b类中的文本垂直对齐。

提前谢谢！

Answer 1

一种方法是将display: inline-block;应用于span.a，然后给它们设置宽度：http://jsfiddle.net/nzrHn/1/

.a { display: inline-block; width: 100px; }

Answer 2

添加css属性display：inline-block和min-width：XXXpx

插入制表符空格以在HTML / CSS中垂直对齐文本

2 个答案: