使用 css 间隔表单元素

Question

我正在寻找一种巧妙的方法来间隔我的表单元素，但我不太确定如何做到这一点。

目前，我正在使用普通的<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。解决方案是什么？

Answer 1

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

\n\n

解决方案

\n\n

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

\n\n

演示版

\n\n

HTML 标记：

\n\n

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

\n\n

请注意，我用标签包裹了“消息”，这是更好的标记。

\n\n

CSS 制作单行内联表单：

\n\n

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

\n\n

CSS 制作多行表单：

\n\n

.form input {\n    display: block;\n    margin-bottom: 1em;\n}\n\n.form label {\n    float: left;\n    margin-right: 0.5em;\n} \n

\n\n

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

\n