爲什麼我的hr標籤在兩個地方表現不同？

我使用相同的類選擇器，但我不明白爲什麼它的行爲不同。爲什麼我的hr標籤在兩個地方表現不同？

這裏是我的網站：

在一審的利潤率罰款;在第二種情況下，不是。

<!-- Side Navigation__________________________________--> 
    <div class="side_nav_wrapper"> 
     <div class="side_nav_photos" id="side_wrapper_text">photos</div> 
     <div class="side_nav_about" id="side_wrapper_text">about</div> 
     <div class="side_nav_writing" id="side_wrapper_text" >writing</div> 
     <div class="side_nav_contact" id="side_wrapper_text">contact</div> 
    </div> 

<!-- CONTENT____________________________________________--> 

<div class="content_wrapper"> 

<!-- Photo __________________________________________--> 

    <div class="home_photo"> 
    </div> 

    <hr class="line"> 
<!-- About___________________________________________________--> 

    <div class="home_text"> 
     <p>Emma Carmichael is a writer and editor based in Brooklyn, NY, although she hails from Brattleboro, VT. Emma graduated from Vassar College in 2010 with a degree in Urban Studies; the theme of her thesis about contextualizing female rappers, ETC. 
    </p> 
    </div> 

    <hr class="line">

（另外，我想不通爲什麼這個類是不適用:)

#side_wrapper_text a:link{ 
     font-family: 'Playfair Display', sans-serif; 
     font-size: 20px; 
     font-weight: 100; 
     color:rgba (255,255,255,1); 
     text-decoration: none; 
     text-align: center; 
     letter-spacing:0.2em; 

} 

<div class="side_nav_wrapper"> 
     <div class="side_nav_photos" id="side_wrapper_text">photos</div> 
     <div class="side_nav_about" id="side_wrapper_text">about</div> 
     <div class="side_nav_writing" id="side_wrapper_text" >writing</div> 
     <div class="side_nav_contact" id="side_wrapper_text">contact</div> 
    </div>

謝謝!!

來源

2013-03-26 Claire

您的類別home_text將應用屬性float: left;，該屬性將<div>元素排除在文檔流之外。如果您刪除該浮動屬性，您會看到<div>再次考慮了文檔流程，並且不位於<hr>的邊界之上。在您的標記

.clearer { clear: both; }

：在你的CSS文件

：

或者，你可以使用clear: both解決這個問題這樣

<div class='home_text'>...</div> 
<div class='clearer'></div> 
<hr class='line' />

來源

2013-03-26 19:43:57

謝謝！但是，如果我拿走了float：left作爲home_text，那麼這個元素的行爲不會奇怪嗎？所以，爲了解決這個問題，我在家庭文本之後添加更清晰的div，並將該類添加到我的css中？ – Claire 2013-03-26 19:47:00

我只是試過，它是一樣的...... – Claire 2013-03-26 19:48:37

然後你搞砸了。在'

'後面加'

'可以解決您的保證金問題。 – 2013-03-26 19:50:28

添加一個明確的：既要。行如果你要漂浮的東西

你也真的應該使用一個類而不是一個ID，如果它將在一個頁面上的位置（比如#side_wrapper_text），也沒有任何鏈接可供它應用。

來源

2013-03-26 19:46:07 yasth

對不起，我很困惑你的意思。明確需要自己的班級嗎？ – Claire 2013-03-26 19:56:58

不，你可以做類似.line {width：400px; clear：both;}。很多人最終定義了一堂課。明確{clear：both;}然後他們隨處使用，但你當然不需要 – yasth 2013-03-27 01:05:46

有沒有在你的問題的第一部分採取了刺，但第二個是雙重的：

的ID是唯一一個頁面上，但你有四個DIV與「side_wrapper_text的ID '
其次，你沒有定位標籤（a）供CSS應用。

你可能想是這樣的，而不是：

#side_wrapper_text a:link{ 
    font-family: 'Playfair Display', sans-serif; 
    font-size: 20px; 
    font-weight: 100; 
    color:rgba (255,255,255,1); 
    text-decoration: none; 
    text-align: center; 
    letter-spacing:0.2em; 

} 

<div id="side_wrapper_text" class="side_nav_wrapper"> 
    <a href="#" class="side_nav_photos">photos</a> 
    <a href="#" class="side_nav_about">about</a> 
    <a href="#" class="side_nav_writing">writing</a> 
    <a href="#" class="side_nav_contact">contact</a> 
</div>

來源

2013-03-26 19:47:28 TunaMaxx

爲什麼我的hr標籤在兩個地方表現不同？

回答

相關問題