0

htmlコード

<div id="signup">
    <p>
        <label>Frist Name</label>
        <input type="text"/>
    <p>
    <p>
        <label>Last Name</label>
        <input type="text"/>
    <p>
    <p>
        <label>Email</label>
        <input type="text"/>
    <p>
    <p>
        <label>Mobile Number</label>
        <input type="text"/>
    <p>
    <p>
        <label>Password</label>
        <input type="password"/>
    <p>
    <p>
        <label>Re Password</label>
        <input type="password"/>
    <p>
</div>

そしてこれはcssです

CSS

#signup{
    width: 860px;
    background-color: white;
    border:  1px black solid;
    padding: 0px;
    margin: 0px;
}
#signup p label{
    padding: 0.4em;
    color: #0986e3;
}
#signup p input{
    width: 300px;
    padding: 0.4em;
}

このコードを実行すると、入力ファイルが左右に表示されますが、これは良くありません。div または li を使用してこの問題を修正できますが、それを行うためのベスト プラクティスが必要です。お互い、これはjsfiddle http://jsfiddle.net/Wiliam_Kinaan/EfBD7/のコードです

4

4 に答える 4

4

ラベルをブロック要素として表示します。このように、幅を設定できます。ただし、インラインにする必要があります。float:leftのいずれかを適用する必要がありますdisplay:inline-block。そうしないと、ブロックだけでなくインラインでも機能します。

#signup p label{
    display:inline-block;
    width:100px;
}

/*or*/
#signup p label{
    float:left;
    width:100px;
}

古いブラウザーをサポートする場合は、float:left. 新しいブラウザを対象とする場合display:inline-blockは、そのほうがよいでしょう。フロート アプローチを使用する場合は、これを CSS に追加してフロートをクリアします。

#signup p{
    overflow:hidden;
    zoom:1;
}
于 2012-05-12T10:53:51.733 に答える
1

ここでは、私がそれを行う方法でそれを行いました。pといくつかのcssを削除して、テキストを右側にしました。もちろん、display：inline-block; width：300px;を追加することもできます。ラベルに移動し、ラベルとHTMLの入力場所を入れ替えます

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#signup{
    width: 500px;
    background-color: #ececec;
    border:  1px black solid;
    padding: 0px;
    margin: 0px;
}
#signup label{
    font:12px arial;
    color: #0986e3;
}
#signup input{
    margin:10px;
    width: 300px;
    padding 0.4em;
}
#signup input[type=button]{
    margin:10px;
    width: 80px;
    padding 0.4em;
}
</style>
</head>
<body>
<div id="signup">
    <input type="text"/>
    <label>Frist Name</label>
    <input type="text"/>
    <label>Last Name</label>
    <input type="text"/>
    <label>Email</label>
    <input type="text"/>
    <label>Mobile Number</label>
    <input type="password"/>
    <label>Password</label>
    <input type="password"/>
    <label>Re Password</label>
    <input type="button" value="click me!" />
</div>

</body>
</html>
于 2012-05-12T11:18:58.850 に答える
1

次のように、ラベルに明確な幅を与えます。

#signup p label{
  padding: 0.4em;
  color: #0986e3;
  width: 100px;
  display: inline-block;
}
于 2012-05-12T10:53:58.200 に答える
1

テーブルを使用できますか、あなたの原因を助けるかもしれません。例を参照してください。マークアップがうまく整列していないことをお詫びします。

于 2012-05-12T11:06:09.233 に答える