0

divの反対側の同じ行に2つのクラスを配置しようとしています。

私は2つのボタンが欲しいです：Login＆Registerはとの極端な側にあり#home-button、同じ線上にあります。

HTMLコードは次のとおりです。

<div id="content">
    <div id="lcol" class="lfloat">
        Hello
    </div>
    <div id="home-button" class="rfloat">
        <a href="#"><div class="login-button Login">Login</div></a>
        <a href="#"><div class="login-button Register">Register</div></a>
    </div>
</div>

私のCSS：

.login-button{
    background:#4578bc;
    color:#fff;
    padding:15px 20px;
    text-align:center;
}

#home-button{
    width:100px;
    margin:100px 0 0 0;
}

.lfloat{float:left}
.rfloat{float:right}

ただし、何を試しても、2つのボタン：Login＆Registerは異なる行で同じ側に表示されます。

4

4 に答える 4

1

LoginとRegisterが異なる行にある理由は、どちらもブロックレベルの要素であるためです。それらを同じ行に配置するか、インラインにするために、それらの一方または両方をフロートさせる必要があります。

次に例を示します。

http://jsfiddle.net/K2Rtr/

<div id="right">
    <div id="right-left">Login</div>
    <div id="right-right">Register</div>
</div>

#right { float: right; width: 100px;}
#right-left {float: left; }
#right-right {float: right;}

この例では、LoginとRegisterは、幅100pxで右に浮いているdivの反対側にあります。

于 2013-03-09T05:33:04.193 に答える
0

次のスタイルを試してください、

.login-button {
    background:#4578bc;
    color:#fff;
    padding:15px 20px;
    text-align:center;
    display:inline-block;
}
#home-button {
    margin:100px 0 0 0;
}

http://jsfiddle.net/YvUER/

于 2013-03-09T05:31:47.533 に答える
0

あなたはこれを試すことができます：

編集 ：

.login-button {
background: #4578BC;
color: white;
padding: 15px 20px;
text-align: center;
width: 100px;
float: left;
}

#home-button {
width: 282px;
margin: 100px 0 0 0;
float: right;
}
于 2013-03-09T05:34:34.100 に答える
0

を使用float:right;すると、より大きなサイズのモニターと高解像度で問題が発生するleft: 35%; position: absolute;ため、div2を使用して解像度の問題を解決できます。

ハッピーコーディング...

于 2013-03-09T06:23:51.460 に答える