我这里的情况如下：
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Header</title>
<style>
/* Global */
* {
margin: 0;
}
html, body {
height: 99%;
margin-top:5px;margin-left:5px;
margin-right:5px;
}
/* Header Menu*/
.task-bar{
width:80px;
background-color:#fff;
border:1px solid green;
position: absolute;
}
.task-bar span{
color:#000;
display:block;
font-size:8pt;
cursor:pointer;
text-decoration:none;
}
.task-bar span:hover{
color:red;
}
/* Header */
.container{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -3em;
width:100%;
font-family:Segoe UI;
color:#fff;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('.task-icon').click(function(){
$(".task-bar").slideToggle();
});
});
</script>
</head>
<body>
<!-- Header Div -->
<div class="container">
<table width="100%" style="background-color:#333030;">
<tr>
<td>
<div style="padding-top:15px;padding-left:20px;font-size:36px;">Header Header Header Header</div>
</td>
<td style="padding-top:10px;">
<div style="padding-left:10px;color:#FFFFFF;" id="userRole">
UserName<br/>
<i>Role Role Role</i>
</div>
</td>
<td>
<div class="task-icon"><img src="profile.png"/></div>
<div class="task-bar" style="display:none;">
<span id=""> Change Role</span>
<span id=""> Profile</span>
<span id=""> Preferences</span>
<span id="logout"> Sign Out</span>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
我必须动态显示用户名和角色，它可以是更少的字符，也可以更多......所以它没有调整我想要的正确方式......它应该接近 profile.png 但是当角色/用户名是 20 -25 个字符 den 它会变远或变形。我想要一些东西坚持profile.png，如果它是更多的字符，它应该浮动：左边并坚持profile.png。
Usernameeeeeeeeeeee - Profile.png
Role -
OR
username - Profile.png
Roleeeeeeeeeeeeeeeeeeee -
提前致谢。