Question

在 一个div中 定义一个图片和一行文字 ，怎样都右对齐，并且能随文字长度变化而变化 在线等 20分

html代码如下：
<div class="login_div">
<img src="images/user.png" alt="用户信息"/>
<a class="login_btn" href="#login">登录/注册</a>
<span class="userinfo">1234506773340@qq.com<a href="#" >退出</a></span>
</div>
CSS如下： 其中login_div为固定宽度 图片大小也是固定的，只是文字部分会随着用户昵称长度变化
.login_div{
width:192px;
float:right;
margin:15px 0px;
height:43px;
padding: 2px 0px;
}
.login_div img{
margin: 6px 12px 5px 6px;
width:32px;
height:32px;
}
login_btn和userinfo这两个类是我目前定义的，不能实现我需要的功能，所以问一下大家

.login_btn{
color:#000;
width:106px;
height:31px;
font-size:15px;
position:absolute;
top:30px;
}
.userinfo{
height:31px;
font-size:12px;
position:absolute;
top:30px;
display:none;
}
.userinfo a{
float:right;
padding:0px 5px;
color:#000;
}
现在的样式效果图为：

我希望的效果是图片和登录注册文字都在右边对齐，下面的用户信息随着字数大小不等，也能灵活变动。
应该怎么改 在线等
.login_btn {
color: #000;
width: 136px;
height: 31px;
font-size: 15px;
position: absolute;
top: 30px;
text-align: right;
float: right;
}
按照您的意思 目前效果是这样的。不是我想要的，图片和注册和登录之间间隔太大。希望图片和注册登录文字之间只有原来的margin间距，而不是 我定义了login_btn的剩余距离。主要考虑到下面用户信息的显示，因为用户信息长度可大小变化 。





Answer 1

<style>
.gavin_design ,.gavin_design div{margin:0 auto; overflow:hidden; display:block; height:auto; background-color:transparent; color:#000;}
/* 如果这个div固定宽度，如200px */
.user_panel{width:200px; height:32px; line-height:32px; /* 你要他浮动就加float */}
.user_panel .init{height:32px; line-height:32px; float:left; display:inline;}
.user_panel .user_pic{width:32px;}
.user_panel .user_pic img{display:block; width:32px; height:32px;}
/* 那么这里的max-width的值是200-32-10-50 = 108px ,IE6不支持max-width */
.user_panel .user_name{padding:0 5px; max-width:108px;}
.user_panel .logout{width:50px; text-align:center;}
.user_panel .logout a{font-size:inherit; color:inherit; text-decoration:none;}
</style>

<div class="gavin_design user_panel">
 <div class="user_pic init"><img src="/pic"></div>
 <div class="user_name init">Username</div>
 <div class="logout init"><a href="javascript:;">退出</a></div>
</div>

Answer 2

text-align:right;字体左对齐
float:right;DIV向右浮动
放置 登录/注册 div设置足够长度 就可以了

你把登录和注册 分开
<div style="float:right;">
<div style="float:right;background:url(图片) no-repeat;text-indent:2.5em;min-width:设置个最小的宽度">登录</div>/<div style="float:right">注册</div>
</div>