Question

我遇到这个问题，我的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/

Answer 1

您的退出文字与p文字（logoText）的默认边距不同。

只需将margin: 1em 0添加到#logout-btn。

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

Answer 2

修复对齐的一种快捷方法是使用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;
}

Answer 3

将此添加到徽标文字。

float: left;
z-index: 0;

同时从徽标'text'中删除<p>标记，因为这会添加新段落。

<span>LogoText</span>

浮动右元素渲染高于其他元素

3 个答案: