用css隔开表单元素

我正在寻找一种整洁的方式来分隔我的表单元素，但我不太确定如何做到这一点

目前，我正在使用普通到空间，但我想知道是否有更好的方法使用类或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>

---

但这不是有效的css。解决方案是什么？

使用逗号分隔选择器

.c-add, .c-update {

---

使用逗号分隔选择器

.c-add, .c-update {

---

结构，也许是这样的：

<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>

---

您可以在此处看到一个实时演示：

结构，可能是这样：

<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>

您可以在这里看到一个实时演示：

.c-add+。c-update是一个有效的CSS选择器。它选择紧跟在c-add类元素之后的所有c-update类元素。例如：

解决方案 可以用逗号分隔多个选择器。您不需要为每个输入指定唯一的类名。只有当您想使它们具有独特的样式时，才需要这样做。由于您没有提供有关预期结果的信息，我用不同的解决方案进行了演示：

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>

CSS生成多行表单：

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

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

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

.c-add+.c-update是一个有效的CSS选择器。它选择紧跟在c-add类元素之后的所有c-update类元素。例如：

解决方案 可以用逗号分隔多个选择器。您不需要为每个输入指定唯一的类名。只有当您想使它们具有独特的样式时，才需要这样做。由于您没有提供有关预期结果的信息，我用不同的解决方案进行了演示：

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>

CSS生成多行表单：

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

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

---

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

您想用CSS做什么？那很好，但我对其他解决方案持开放态度。您想用CSS做什么？那很好，但我对其他解决方案持开放态度。谢谢您的提示。我最终使用了.crud interface input.c-input{margin right:100px；}如图所示，我对第一段进行了更新，该段解释了初始选择器是有效的，但有不同的含义。感谢提示。我最终使用了.crud接口input.c-input{margin right:100px；}如图所示，我对第一段进行了更新，该段解释了初始选择器是有效的，但其含义有所不同