css - 文本填充与换行不同

Question

我的 CSS 问题让我有点抓狂。

我在单页菜单中对大/小文本使用了两种不同的 CSS 定义。小文本应该与大文本相对。

当较大的文本换行时，较小的文本处于正确的位置。当较大的文本不换行时，就会出现间隙。

我已经尝试过使用 block 和不使用 block，没有区别。当前的 CSS 定义和菜单位于 wptest.SiliconStrat.com 的左侧页面。

.hometopic {
font-family: sans-serif;
font-size: 1.1em;
font-weight: bold;
margin-top:4;
margin-bottom:0;
text-decoration: none;
line-height:100%;
display: inline-block;
}

a.hometopic:hover {
color: #B3535E;
}
.hometopicsub {
font-family: sans-serif;
font-size: 0.9em;
margin-top: 0;
line-height: 0.9;
display: inline-block;
}

Answer 1

尝试删除 .hometopicsub 之前的 BR，使用 float:left (hometopicsub) 和 padding-bottom (hometopic)

.hometopic {
font-family: sans-serif;
font-size: 1.1em;
font-weight: bold;
margin-top:4;
margin-bottom:0;
text-decoration: none;
line-height:100%;
display: inline-block;
padding-bottom: 8px;
}
a.hometopic:hover {
color: #B3535E;
}
.hometopicsub {
font-family: sans-serif;
font-size: 0.9em;
margin-top: 0;
line-height: 0.9;
display: inline-block;
float: left;
}