我将如何使这段文本和按钮与网页的布局相匹配


How would I fit this piece of text and button with the layout of the webpage?

我有索引.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;
}

我不太确定我明白你的意思,但对我来说听起来像 css 定位:

你也许可以将绝对的div放在右上角?

.autenticado{

位置:绝对;顶部:0px;右:0px;}

如果你在一个固定宽度的容器中拥有所有这些代码,只需给它位置:相对;让它保持在div 内。

希望这有帮助,尽管我可能误解了您想要什么:)