Question

我正在寻找一种简洁的方法来填充我的表单元素，但我不确定该怎么做。

目前，我正在使用普通<br/>空间，但我想知道是否有更好的方法可以使用class或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。解决方案是什么？

Answer 1

.c-add + .c-update是一个有效的CSS选择器。它选择具有“c-update”类的所有元素，该类紧跟在具有“c-add”类的元素之后。示例：DEMO（CSS Selector Reference）

解决方案

您可以使用逗号分隔多个选择器。您不需要为每个输入提供唯一的类名。只有你想要独特地设计它们时才有必要。由于您没有提供有关预期结果应该如何的信息，因此我使用不同的解决方案进行了演示：

DEMO

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>

请注意，我用标签包装了“Message”，这是更好的标记。

用于制作单行内联形式的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;
}

您可以通过为每个输入元素或类型使用特定类来混合使用这两种方法。

Answer 2

使用逗号分隔选择器。

.c-add, .c-update {

Answer 3

结构，或许这样：

<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

与css间隔表单元素

3 个答案:

解决方案