css - 内联元素有多于 2 行(一行在另一行中)

Question

我不能像这样设置内联元素背景:

我的代码是这样的:

#divMansetKategoriHaberleriContainer
{
    background-color: Transparent;
    margin-top: 4px;
    font-size: 12px;
}
.divKategoriHaberItem
{
    float: left;
    background-color: White;
    width: 324px;
    height: 126px;
    margin: 0;
    padding: 0;
}
.divKategoriHaberItemImage
{
    float: left;
    width: 80px;
    height: 80px;
    border: 1px solid red;
    margin: 2px;
}
.imgKategoriHaberResim_Cevre
{
    width: 95%;
    height: 95%;
}
.divKategoriHaberItemBaslikIcerik
{
}
.spHaberBaslik_Cevre
{
    background-color: Green;
    display: inline;
    font-weight: bold;
    padding: 5px;
    height: 20px;
}

.spHaberIcerik_Cevre
{
    display: block;
}
.divKategoriHaberDevami_Cevre
{
    background-image: url('../images/HaberinDevami_Cevre.png');
    background-repeat: no-repeat;
    background-position: right;
    height: 13px;
}




<div class="divKategoriHaberItem">
    <div class="divKategoriHaberItemImage">
        <img src='' alt='DÜNYANIN MEKANİK Dengesi Bozuldu' class="imgKategoriHaberResim_Cevre" />
    </div>
    <div class="divKategoriHaberItemBaslikIcerik">
        <span class="spHaberBaslik_Cevre">
           <a href='CevreHaber.aspx?id=2128'>DÜNYANIN MEKANİK Dengesi Bozul</a>
        </span>
        <span class="spHaberIcerik_Cevre">Demokratik Kongo Cumhuriyeti'n</span>
    </div>
    <div class="divKategoriHaberDevami_Cevre"></div>
</div>

PS:对不起，我不会写句子:(

Answer 1

如果我正确理解了这个问题，您将需要添加一个等于内联元素总高度的行高...

在您的情况下，这将是 30px(高度为 20px + 填充 5px 顶部和 5px 底部为 10px..)

.spHaberBaslik_Cevre
{
    background-color: Green;
    display: inline;
    font-weight: bold;
    padding: 5px;
    height: 20px;
    line-height:30px; /*height + padding-top +padding-bottom*/
}