1

ラベルに合わせてスタイルを設定する傾向がある、多くのフォームを含む管理サイトがあります。

<form>
    <label for="name"><input type="text" name="name">
    <label for="name"><input type="text" name="name">
    <label for="name"><input type="text" name="name">
</form>

効果を得るために私が通常行うこと：

label{
    width: 150px /* fixed that is */
    text-align: right;
}

これはうまく機能しますが、複数のフォームが非常に異なる場合があり、ラベル名が長い場合はそうではありません. しかし、コンテンツがほとんどない場合、大きなギャップが生じ、結果は全体的に十分に柔軟ではありません.

この問題の解決策を考えている人はいますか? CssかjQuery(効果があるかは不明)かな？しかし、jQuery に対する私の考えは、特定のフォーム (同じページにいくつかの異なるフォームがある場合があります) から .width() をループし、そこから max を選択してから、親に width として割り当てることですが、それは面倒な解決策のように思えます。

4

1 に答える 1

0

わかりました、これはどうですか...

パーセンテージ幅とフロートの使用：左。長いラベルは複数の行に折り返されます（これはあなたが求めていたものではありません、私は知っています）。

HTML：

<form>
    <label for="name">lka;sjdl kfa jsldkkfjlkasdjf alkdsjalkfk asdfasd asd fasdf dfdsa afsd afdsf asdfsdads jdaslk </label>
    <input type="text" name="name">
    <label for="name">ljlkjljljljljlkj</label>
    <input type="text" name="name">
    <label for="name">asdfasfdsasdaf</label>
    <input type="text" name="name">
</form>

CSS：

form {
    width:400px;
}
label {
    width: 48%;
    float:left;
    clear:both;
}
input {
    width: 48%; 
    float: left;
}

継承された境界線やマージンなどを考慮して、合計幅の合計が100％未満になる必要があることがわかりました。49％は試行錯誤で機能すると判断しました。

Firefoxでのみテストされています。

于 2012-05-31T08:48:50.633 に答える