同一行上的不同文本样式答案

【问题标题】：different text style on same line同一行上的不同文本样式
【发布时间】：2017-12-24 18:37:00
【问题描述】：

我有 2 种文本样式，我正在尝试将第一个和第二个文本在同一行上水平对齐，如下所示：

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>

【问题讨论】：

这样做的目的是什么？ ..为什么要对齐不一样的东西？
我正在尝试创建一个具有 2 种不同样式的文本表。它必须是可读的，所以它“应该”对齐。
所以简单地使用表格
使用表格会带来同样的问题。
你能显示你想要如何对齐的屏幕截图，这样我就可以理解了:)

标签： html css text alignment lines

【解决方案1】：

你：“我有 2 种文本样式，我正在尝试水平对齐第一个和第二个，”

您可以将块元素的显示样式设置为 inline-block，而不是在块元素（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>

【讨论】：

这有帮助，但两种样式的主要区别不仅在于文本的高度，还在于文本的类型。
您需要提供一个更好的可视化示例来说明问题所在以及包含问题的所有代码。我不确定如何解决其他问题。