Question

我有2种样式的文字，我想在同一行水平对齐第一个和第二个样式，以便像这样：

AAA   aaa
BBB   bbb
CCC   ccc
DDD   ddd

EEE   eee

但由于款式之间的高度不同，我似乎无法获得与此类似的东西。

这是我的代码：

＆＃13;

div {
    white-space:nowrap;
}

＆＃13;

<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>

＆＃13;

Answer 1

你：＆＃34;我有两种文字样式，我想要水平对齐第一个和第二个，＆＃34;

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

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

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

＆＃13;

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;    
}

＆＃13;

<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>

＆＃13;

同一行上的不同文字样式

1 个答案: