我有两种样式的文本,我想在同一行上水平对齐第一个和第二个,如下所示:
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>
你:“我有两种文字样式,我试图水平对齐第一个和第二个,”
您可以将块元素的显示样式设置为内联块,而不是在块元素(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>