0

メインページにボックスのあるウェブページを作成しようとしていますが、次のようになります。

Login
-----Or-----
Register

これは私が持っているコードです

<center>
   <p>Login</p>
    <hr style="width: 16%; float: left; margin-left:30%;"/>
     <p style="float: left; margin-left:2%; margin-right: 2%; width: 4%;">Or</p>
    <hr style="width: 16%; float: right; margin-right: 30%;"/>
   <p>Register</p>
</center>

このように見えます-

ここに画像の説明を入力してください

私には1つの問題があり、助けが必要なことが1つあります

問題は、Registerテキストが整列されているはずなのに整列されていないことです。私が助けを必要としているのは、<hr>行をOrテキストの半分まで下げることです。

このような -

非常に悪い画像でごめんなさい

これを手伝ってください。

4

2 に答える 2

3

このjsFiddleの例のようにします。

HTML

<div id="container">
    <p>Login</p>
    <div id="or"> <span>Or</span>
    </div>
    <p>Register</p>
</div>

CSS

#container {
    text-align:center;
}
#or {
    height: 2px;
    background-color: black;
    text-align: center;
}
span {
    background-color: white;
    position: relative;
    top: -0.5em;
    padding:0 10px;
}
于 2013-03-20T20:39:10.367 に答える
0

これを試して：

<div class="foo">
    <p>Login</p>
    <div class="hr"><p>or</p></div>
    <p>Register</p>
</div>

.foo{text-align:center;line-height:1em;}
.foo .hr p{background:#fff;margin:0;position:relative;z-index:2;display:inline-block;padding:0 1em;}
.foo .hr:after{border-bottom:1px solid #000;content: " ";display:block;position:relative;top:-0.5em;}

次のようになります。

ここに画像の説明を入力してください

于 2013-03-20T20:41:39.587 に答える