html - div跳出短名称的header

Question

在一个网站上工作，我想把名字作为一个变量来显示谁登录了，但问题是当名字像 Petter 这样短时，注销按钮会从标​​题中消失，但当名字很短时，它会留在标题中这个名字和 Petter Hansen 一样长。使按钮保持在与名称大小无关的相同位置是否是一种解决方案？

jsfiddle:http://jsfiddle.net/85tU2/

Answer 1

试试这个:http://jsfiddle.net/85tU2/2/

我整理了一些东西 - 基本上，移动了 div，因为您正在使用 float:right。您的代码使用边距将按钮移动到名称的右侧。所以在 css 中，我这样做了:

#formtekst {
    position:relative;
    float: right;
    margin: 1px 0px 0px 0px;
    background:#ccc;
} 
#form-group {
    position:relative;
    float:right;
    margin:15px 0px 0px 0px;
    background:#ddd;
}

对于 html:

<div id="logo">
    <img id="logo" src="NIH.gif" alt="logo" />
</div>
<div id="form-group">
    <button type="button" class="btn">Logg ut</button>
</div>
<div id="formtekst">
    <p>Logged in as Petter</p>
</div>