ここには次のような状況があります。
<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 文字で、遠ざかったり歪んだりします。何かを profile.png に貼り付けたいのですが、文字数が多い場合は、左に移動して profile.png に貼り付ける必要があります。
Usernameeeeeeeeeeee - Profile.png
Role -
OR
username - Profile.png
Roleeeeeeeeeeeeeeeeeeee -
前もって感謝します。