php - 我如何使这段文本和按钮适合网页的布局？

我目前正在创建的网站具有index.php，并且具有网站的布局。
在导航栏上方，我有一个“注销”按钮和一些显示登录帐户的文本，我需要调整文本和按钮的大小，以在页面上获得固定的空间，而不会在用户名太大或太短时四处移动。

http://jsfiddle.net/mxh2s/用于索引文件的JSFiddle，这是我需要修复和调整的部分：

    <div class="autenticado">
    Está autenticado como:
    <?php
      $query = "Select * from user where id_user='".$_SESSION["user"]."'";
      $resultado = mysqli_query($ligabd, $query);
      $registos=mysqli_fetch_array($resultado);

      echo $registos["username"]."&nbsp;&nbsp;&nbsp;";
      echo "<a href='logout.php' class='button'>Logout</a>";
    ?>

抱歉，我的代码是葡萄牙语的...如果您在弄清楚代码方面遇到问题，请说出来，我将尽力提供帮助。

最佳答案

与此类似的布局应该起作用。但是我有点猜测，因为您的代码示例不是很清楚。

<div id="header">
   <div id="login">
        <button>Sign Out</button>
        <span class="username"></span>
   </div>
</div>

一个基本的CSS示例，显然其他属性会根据您的布局而有所不同。

#header {
width:100%;
}

#login {
width:auto;
float:right;
}

#login .username {
float:right;
width:auto;
}

#login button {
float:right;
}