同一行上的不同文字样式

问题描述 投票:0回答:1

我有两种样式的文本,我想在同一行上水平对齐第一个和第二个,如下所示:

AAA   aaa
BBB   bbb
CCC   ccc
DDD   ddd

EEE   eee

但由于款式之间的高度不同,我似乎无法获得接近这一点的东西。

这是我的代码:

div {
    white-space:nowrap;
}
<div style="float: left; width: 44%; padding: 0 10px 0 0;">
<h2 style="text-align: right;">aaa<br/>
bbb<br/>
ccc<br/>
ddd</h2>
<h2 style="text-align: right;">eee</h2>
</div>
<div style="float: right; width: 52%; padding: 0 10px 0 0;">
<h3>aaa<br/>
bbb<br/>
ccc<br/>
ddd</h3>
<h3>eee</h3>
</div>
html css text alignment lines
1个回答
0
投票

你:“我有两种文字样式,我试图水平对齐第一个和第二个,”

您可以将块元素的显示样式设置为内联块,而不是在块元素(div)上使用浮点数。

IMO将文本放在无序列表中可以提高理解力。你没有列出你想要完成的任何限制所以我只是想完成你所说的。

仅供参考,您应该尽可能地将样式与HTML分开。

ul{
  display: inline-block;
  list-style: none;
  /*h2 is 1.5 em*/
  font-size: 1.5em
}

body ul:nth-child(2){
  /* h3 is 1.3 em */
  font-size: 1.3em;
}

li{
  /*indirectly sets a uniform baseline, the value is arbitrary*/
  height: 40px;    
}
<ul>
  <li>aaa</li>
  <li>bbb</li>
  <li>ccc</li>
  <li>ddd</li>
  <li>eee</li>
</ul>

<ul>
  <li>aaa</li>
  <li>bbb</li>
  <li>ccc</li>
  <li>ddd</li>
  <li>eee</li>
</ul>
© www.soinside.com 2019 - 2024. All rights reserved.