浮法右元素比其他元素

我有這樣的問題，即我的float: right元素確實是浮動權呈現較高，但它上面的其他元素，有時甚至去離屏幕浮法右元素比其他元素

我的CSS：

html, body { 
    width: 100%; 
    height: 100%; 
    padding: 0; 
    margin: 0; 
} 
header { 
    background-color: black; 
} 
#header-limiter * { 
    display: inline-block; 
    color: white; 
} 
header span { 
    font-weight: 700; 
    font-size: 18px; 

} 
#header-limiter { 
    padding: 10px; 
    width: 100%; 
    display: block; 
} 
#logoText { 
    font-size: 16px; 
} 
#logout-btn { 
    float: right; 
}

的jsfiddle ：http://jsfiddle.net/wLftd9ph/3/

來源

2015-12-06 Deimantas

你退出文本不具有相同的默認餘量爲p文本（logoText）。

只需將margin: 1em 0添加到#logout-btn即可。

http://jsfiddle.net/wLftd9ph/5/

來源

2015-12-06 16:44:27

的作品感謝 – Deimantas

關於這個網站，你覺得有用的答案，[考慮的給予好評]（http://stackoverflow.com/help/someone-answers）。沒有義務。只是提高質量內容的一種方式。 –

一個快速的方法來解決定位是使用display: inline-block與vertical-align: middle而不是浮動，你可以在此看到小提琴http://jsfiddle.net/exmubg5m/

#logout-btn { 
    display: inline-block; 
    vertical-align: middle; 
} 
textarea { 
    display: inline-block; 
    vertical-align: middle; 
}

來源

2015-12-06 16:33:38 Zoheiry

添加標誌文字。

float: left; 
z-index: 0;

同時刪除從LOGO「文」的<p>標籤，因爲這增加了一個新的段落。

<span>LogoText</span>

來源

2015-12-06 16:40:34 Jack

浮法右元素比其他元素

回答

相關問題