圖像浮動到右側，沒有文字或其他元素包裹在左側

Question

我希望下方的徽標與頁面右側對齊。我試過添加float:right，但是會導致水平線環繞在左邊。我不希望其他任何東西佔據垂直空間。

這裏是我的HTML

<header > 
    <div> 
     <img style="margin-right:40px; padding-bottom:20px" src="./AddFiles/bamboo_logo.png" height="50"> 
     <br> 
     <hr> 
    </div> 
</header> 

Answer 1

您可以嘗試添加文本對齊到包含div：（Working jsFiddle）

<header> 
    <div style="text-align:right;"> <!-- add this css, images are by default inline --> 
     <img style="margin-right:40px; padding-bottom:20px" src="./AddFiles/bamboo_logo.png" height="50"> 
     <br> 
     <hr> 
    </div> 
</header>