0

次のコードでは、画像を次のようにレンダリングしますここに画像の説明を入力 。必要な効果は、「Hello, user1」が黒いボックスに配置され、両方が灰色のボックスの右側に配置されることです。これを達成するにはどうすればよいですか? ?

<html>
<head>
<style>
    #header {
    width: 100%;
    height: 81px;
    background: url(http://www5.picturepush.com/photo/a/12541848/img/Anonymous/header-bg.png) 0 0 repeat-x;
}
#header h1 {
    display: block;
    float: left;
    margin: 30px 0 0 35px;
    font-size: 18px;
    color: #6a6a6a;
}
#header #logo {
    display: block;
    float: left;
}
#header #userlog {
    width: 272px;
    height: 31px;
    background-color: #363636;
    border-radius: 2px;
    float: right;
    margin: 27px 26px 0 0;
}#header #userlog a {
    font-size: 13px;
    float: left;
    color: #b7b7b7;
    margin-top: 6px;
}

#welcome_msg {
    color: #b7b7b7;
    float: right;

}
    </style>

</head>
<body>
<div id="header">
    <a id="logo" href="dashboard.php"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/archive/c/c1/20070624012131!Fuji_apple.jpg/120px-Fuji_apple.jpg" alt="" /></a>
    <div class="welcome_msg" id="welcome_msg">hello, user1</div>
    <h1> My Portal   </h1>
    <div id="userlog">
        <a href="#" style="margin-left:25px;text-decoration:underline;">Contact Support</a>
        <a href="#" style="margin-left:20px;">FAQ</a>
        <a href="../index.php" style="margin-left:25px;">logout</a>
    </div>
</div>
</body>
</html>
4

2 に答える 2

3

両方の要素を div に入れ、その div を右にフロートします。右側の余分なスペースは、要素に 26 ピクセルの余白があるためです。

<div id="whatever">
    <div class="welcome_msg" id="welcome_msg">hello, user1</div>
    <div id="userlog"> <a href="#" style="margin-left:25px;text-decoration:underline;">Contact Support</a>
        <a href="#" style="margin-left:20px;">FAQ</a>
        <a href="../index.php" style="margin-left:25px;">logout</a>
    </div>
</div>


#whatever {
    float:right;
}

#header #userlog {
    width: 272px;
    height: 31px;
    background-color: #363636;
    border-radius: 2px;
}

デモ: http://jsfiddle.net/kzhuL/

于 2013-03-30T06:02:36.047 に答える
0

このような？

ここに画像の説明を入力

と<div>を保持するコンテナを追加しました。#userlog#welcome_msg

CSS

#header #userlog {
    margin: 0 26px 0 0;
}
#welcome_msg {
    margin-right:26px;
}

HTML

<div id="container">
    <div class="welcome_msg" id="welcome_msg">hello, user1</div>
    <br />
    <div id="userlog"> 
        <a href="#" style="margin-left:25px;text-decoration:underline;">Contact Support</a>
        <a href="#" style="margin-left:20px;">FAQ</a>
        <a href="../index.php" style="margin-left:25px;">logout</a>
    </div>
</div>
于 2013-03-30T06:02:14.197 に答える