邊緣左邊的按鈕VS邊緣左邊的文字旁邊浮動的左側圖像

我有一個圖像（80 * 80像素），這是浮動左。在右邊，我想要一些文字和一個按鈕。邊緣左邊的按鈕VS邊緣左邊的文字旁邊浮動的左側圖像

該文本具有90px的頁邊空白，並且在圖片的右側很好地放置了10px。即。邊距忽略浮動圖像。

我也有一個按鈕，我想與文本對齊。但是，當我將按鈕的頁邊距設置爲90px時，會將按鈕90px移到圖片邊緣的右側 - 即。它似乎並沒有像圖像那樣忽略浮動文本。

任何想法，爲什麼這是這樣嗎？我創建了一個簡單的plnkr顯示是什麼樣子：http://plnkr.co/edit/YLgBSIYF750xgPlzrSuB

的HTML看起來像這樣：

<svg class="picture" height="80px" width="80px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"> 
    <path ...... /> 
</svg> 

<div class="title">Some Text</div> 

<button class="button">A Button</button>

而CSS是這樣的：

.picture { 
    float: left; 
} 

.title { 
    margin-left: 90px; 
    font-size: 25px; 
} 

.button { 
    margin-left: 90px; 
}

來源

2016-04-03 Tom O' Brien

您按鈕不可一個塊元素。這意味着它被解釋爲正在流向圖像左側的文本。

將按鈕更改爲display: block並且其行爲與文本相同。

或者，使您的文本被包裹在不是塊元素的元素中（或者將div更改爲顯示：內聯），並且不要設置邊距。

來源

2016-04-03 16:34:01 arnorhs

邊緣左邊的按鈕VS邊緣左邊的文字旁邊浮動的左側圖像

回答

相關問題