1

フォーム要素の間隔を空けるためのきちんとした方法を探していますが、その方法がよくわかりません。

現在、私は通常の<br/>スペースを使用していますが、クラスまたはIDを使用してこれを行うより良い方法があったのだろうか

<form>
  Message: <input type="text" class="msg" name="message" /><br/><br/>
   <input type="submit" class="c-add" value="Add" />
   <input type="submit" class="c-update" value="Update" />
  </form>

私は考えています

 .c-add + .c-update{
  margin-right:100px;
  }

しかし、それは有効なcssではありません。解決策は何ですか?

4

3 に答える 3

4

.c-add + .c-update有効な CSS セレクターです。「c-add」クラスを持つ要素の直後に続く「c-update」クラスを持つすべての要素を選択します。例:デモ( CSS セレクタ リファレンス)

解決

複数のセレクターはコンマで区切ることができます。各入力に一意のクラス名を付ける必要はありません。これは、独自のスタイルを設定したい場合にのみ必要です。期待される結果がどのように見えるかについての情報を提供しなかったため、さまざまなソリューションでデモを作成しました。

デモ

HTML マークアップ:

<form class="form">
   <label>Message:</label><input type="text" class="msg" name="message" />
   <input type="submit" class="add" value="Add" />
   <input type="submit" class="update" value="Update" />
</form>

「メッセージ」をラベルでラップしたことに注意してください。これはより良いマークアップです。

1 行のインライン フォームを作成する CSS:

.form input {
    margin-right: 0.5em;
}

.form label {
    float: left;
    margin-right: 0.5em;
}

複数行フォームを作成する CSS:

.form input {
    display: block;
    margin-bottom: 1em;
}

.form label {
    float: left;
    margin-right: 0.5em;
}

入力要素またはタイプごとに特定のクラスを使用することで、両方のアプローチを混在させることができます。

于 2012-06-30T09:30:50.570 に答える
2

コンマを使用してセレクターを区切ります。

.c-add, .c-update {
于 2012-06-30T09:23:39.870 に答える
1

構造は、おそらく次のようになります。

<form action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>">
    <ul>
        <li>
            <label>
                <span>Name</span>
                <input type="text" name="name" />
                <small class="errorText"><?php echo ($_POST["name"] == "") ? "This field is required" : ""; ?></small>
            </label>
        </li>
        <li>
            <label>
                <span>Email</span>
                <input type="text" name="email" />
                <small class="errorText"><?php echo ($_POST["email"] == "") ? "This field is required" : ""; ?></small>
            </label>
        </li>
        <li>
            <label>
                <span>Subject</span>
                <input type="text" name="subject" />
                <small class="errorText"><?php echo ($_POST["subject"] == "") ? "This field is required" : ""; ?></small>
            </label>
        </li>
        <li>
            <label>
                <span>Message</span>
                <textarea name="message" cols="80" rows="7"></textarea>
                <small class="errorText"><?php echo ($_POST["message"] == "") ? "This field is required" : ""; ?></small>
            </label>
        </li>
        <li>
            <input type="submit" name="submit" value="Send" />
        </li>
    </ul>
</form>

そして同じCSS：

* {font-family: Segoe UI, Tahoma;}
h1 {font-weight: bold; font-size: 14pt; padding: 5px 0; margin: 5px 0; border: 1px solid #999; border-width: 1px 0;}
input[type='submit'] {padding: 5px 20px; cursor: pointer;}
ul, li {display: block; list-style: none; margin: 0; padding: 0;}
ul li {padding: 5px 0;}
ul li label span {display: block; cursor: pointer;}
ul li label .errorText {color: #f00; font-weight: bold; vertical-align: top;}
ul li label textarea {width: 300px;}

ここでライブデモを見ることができます: Demo

于 2012-06-30T09:24:24.970 に答える