CSS塊錯誤定位

編輯：我只是修復它，我有一個「行高：1.5em;」在體內{}。抱歉抱歉，謝謝所有試圖幫助我的人。CSS塊錯誤定位

我正在我的網站上爲新聞系統建立一個表單。我只使用HTML/CSS，稍後會添加php。 This is my final result.
問題是底部的文本框。他們是3（由/暱稱/日期發佈）。他們的位置應該更高，並且您可以看到here。這就像只有一半的文字在框中。
這裏是我的代碼：

<div class="news"> 
    <img src="img/Facebook.png" class="news-picture" alt="test" /> 
    <a href="#" class="news-title">Stanislav Ivanov on "How to escape from bronze"</a> 
    <span class="postedby">Posted by &nbsp </span> 
    <span class="nickname"><a href="#">Sunata</a> &nbsp </span> 
    <span class="date">October 6, 2015</span> 
</div>

.news-picture { 
    width: 45px; 
    height: 45px; 
    margin: 0px 12px 0px 0px; 
    border-radius: 3px; 
    float: left; 
} 
.news-title:link, 
:visited { 
    color: #0084B4; 
    font-weight: bold; 
    font-size: 16px; 
    text-decoration: none; 
    float: left; 
    display: block; 
    margin-top: 0px; 
} 
.news { 
    font-family: Lato, sans-serif; 
    height: 45px; 
    clear: both; 
    margin-bottom: 10px; 
} 
.news span { 
    display: block; 
    max-height: 14px; 
    float: left; 
    vertical-align: top; 
} 
.news .postedby { 
    font-size: 14px; 
    color: grey; 
} 
.news .nickname { 
    color: #0084B4; 
    font-size: 14px; 
} 
.news .date { 
    font-size: 14px; 
    color: black; 
}

來源

2015-10-07 GoshoPepoto

請提供一個小提琴，是否存在你不放在這裏的任何CSS？ – ebilgin

因爲浮動它，你的所有span是float:left，而不是clear。你需要明確的是，添加刪除的翼展

所有的CSS -

.news-picture { 
    width: 45px; 
    height: 45px; 
    margin: 0px 12px 0px 0px; 
    border-radius: 3px; 
    float: left; 
} 
.news-title:link, 
:visited { 
    color: #0084B4; 
    font-weight: bold; 
    font-size: 16px; 
    text-decoration: none; 
    float: left; 
    display: block; 
    margin-top: 0px; 
} 
.news { 
    font-family: Lato, sans-serif; 
    height: 45px; 
    clear: both; 
    margin-bottom: 10px; 
} 
/*.news span { 
    display: block; 
    max-height: 14px; 
    float: left; 
    vertical-align: top; 
}*/ 
.news .postedby { 
    font-size: 14px; 
    color: grey; 
} 
.news .nickname { 
    color: #0084B4; 
    font-size: 14px; 
} 
.news .date { 
    font-size: 14px; 
    color: black; 
} 
.clearfix:after{ 
    content: ''; 
    display: block; 
    clear: both; 
}

HTML的

<div class="news"> 
    <img src="img/Facebook.png" class="news-picture" alt="test" /> 
    <a href="#" class="news-title">Stanislav Ivanov on "How to escape from bronze"</a> 
    <div class="clearfix"> 
     <span class="postedby">Posted by &nbsp </span> 
     <span class="nickname"><a href="#">Sunata</a> &nbsp </span> 
     <span class="date">October 6, 2015</span> 
    </div> 
</div>

我希望它會幫助你。

來源

2015-10-07 11:08:01

它沒有改變任何東西。 – GoshoPepoto

哦，好的，你可以請加一個小提琴嗎？ –

我只是修復它，我有行高：1.5em;謝謝你，所有的東西都是錯誤的。 – GoshoPepoto

您添加最大高度限制

.news span { 
    display: block; 
    **max-height: 14px;** 
    float: left; 
    vertical-align: top; 
}

來源

2015-10-07 11:14:46

有或沒有這條線是相同的。 – GoshoPepoto

沒有這一行 –

我只是修復它，我有行高：1.5em;謝謝你，所有的東西都是錯誤的。 – GoshoPepoto

的問題造成的，因爲文字可能有一個默認line-height。

嘗試給定一個自定義line-height例如：line-height:14px。（玩這個號碼有點想你有它）

來源

2015-10-07 11:28:31

CSS塊錯誤定位

回答

相關問題