div用短名称跳出标题

Question

在我正在考虑将名称作为变量的网站上工作，以显示谁已登录，但问题是当名称短暂为Petter时，注销按钮会退出标题，但是当它停留在内部时Petter Hansen这个名字很长。这是一个解决方案，使buttom保持在与名称大小无关的相同位置吗？

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

Answer 1

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

我已经整理了一些东西 - 基本上，因为你正在使用float:right而移动了div。您的代码使用边距将按钮移动到名称的右侧。所以在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>

Answer 2

嘿，

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

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