1

私の問題は、ラベルを入力を水平方向に、入力を垂直方向にインライン化できないことです

次のような出力が必要です。

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

しかし、私はこれにテーブルを使用しています。今はテーブルを使いたくないのですが、どうしたらいいのかわかりません。私は作ろうとしますが、それは非常に間違っています。

これが私のCSSです

   article#login, article#register {
    padding:5px 0 5px;
    border:1px solid black;
    width:200px;
    margin:0 auto;
}

そして、これが私のhtmlです

<section id="siteContent" class="tabs">
    <h1>Section</h1>
    <article id="login">
        <h1>Login</h1>
        <label>E-mail:</label>
        <input type="email">
        <label>Password:</label>
        <input type="password">
        <input type="button" value="Login">
    </article>
    <article id="register">
        <h1>Register</h1>
        <label>Name:</label>
        <input type="text">
        <label>E-mail:</label>
        <input type="email">
        <label>Password:</label>
        <input type="password">
        <label>Re-type:</label>
        <input type="password">
    </article>
</section>
4

2 に答える 2

2

私の知る限り、テーブルなしで水平方向と垂直方向の位置合わせを実現する本当の方法はありません。（@TimMedoraによって間違っていることが証明されました）ただし、入力ボックスをラベルと同じ行に表示する場合は、サイズを調整する必要があります。それらは現在あなたの箱よりも大きいので、他の要素によって押しのけられます。ただし、これを行った後でも、次のcss（または同様のもの）を適用して、要素が個々の行にとどまるようにする必要があります。

label {
    display: inline-block;
}

デモ

于 2012-09-08T06:36:33.677 に答える
1

このようなタグの中にあなたlabelとを包んでみませんかinputp

<article id="login">
        <h1>Login</h1>
    <p>
        <label>E-mail:</label>
        <input type="email">
    </p>

    <p>   
        <label>Password:</label>
        <input type="password">
    </p>       
        <input type="button" value="Login">
    </article>​

次に、使用しCSSて配置を修正します。

デモを見る

お役に立てば幸いです。

于 2012-09-08T06:36:28.643 に答える