内联元素有两行以上（一行在另一行内）

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顶部为10px，底部为5px ......）

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