在HTML/CSS中插入制表符空间以垂直对齐文本
我不知道如何结合使用HTML和CSS获得以下行为:在HTML/CSS中插入制表符空间以垂直对齐文本,html,css,Html,Css,我不知道如何结合使用HTML和CSS获得以下行为: foo = this foobar = bit goso = needs etcetc = aligning 现在我可以在需要的地方插入空格(就像我在上面做的那样),但我很确定一定有一种方法可以“自动”做到这一点 我知道我可以用表格来做这件事,但我不想这样做。还有其他方法吗 我的问题归结为:如何使用HTML/CSS以类似于office套件中的选项卡的方式自动垂直对齐文本。 以下是一个上下文中的示例: <p><spa
foo = this
foobar = bit
goso = needs
etcetc = aligning
现在我可以在需要的地方插入空格(就像我在上面做的那样),但我很确定一定有一种方法可以“自动”做到这一点
我知道我可以用表格来做这件事,但我不想这样做。还有其他方法吗
我的问题归结为:如何使用HTML/CSS以类似于office套件中的选项卡的方式自动垂直对齐文本。
以下是一个上下文中的示例:
<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>
foo=“abcDeveloper”
bar=“123”
foobar=“dfg”
foobarstar=“456”
在本例中,我希望类b中的文本垂直对齐
提前谢谢你 一种方法是应用
显示:内联块编码>到您的span.a
s,然后给它们一个设置的宽度:
添加css属性display:inline block和min width:XXXpx这就是表格的用途。@当然还有其他方法吗?如果我在写一些简单的东西,比如office文档,我不必创建一个表来对齐所有内容。我希望HTML/CSS对标签有一个类似的解决方案。是的,这是一个很好的方法。但是width:**
可能也有帮助。@Nico我试过了,但没用。请您解释一下好吗?我的意思是,如果您知道所有字段的最大值都是180px(例如),那么您可以将span.a
的宽度固定为180px,将span.b
的宽度固定为15px(或任何最适合您的值)。这样所有的=
符号都将对齐,为您提供了一种相当丑陋的模拟表格的方式。还是推荐一张桌子,让这一切都自动进行!如果需要相对单位而不是绝对单位,请使用em
而不是px
。前者与字体大小和缩放比例有关,与字体大小缩放比例相同。
.a { display: inline-block; width: 100px; }