Html div用短名称跳出标题

在一个网站上工作，我想把名字作为一个变量来显示谁登录了，但问题是，当名字短如Petter时，log out按钮会从标题中消失，而当名字长如Petter Hansen时，它会留在标题中。使钮扣保持在同一位置而不受名称大小的影响，这是一种解决方案吗

jsfiddle

：

试试这个：

我整理了一些东西-基本上，移动了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>

日志ut
以Petter身份登录

嘿，

您可以轻松地将#formtkst的样式更改为此

  #formtekst {
float: right;
margin: 1px 15% 0px 0px;}