这应该很简单.我可以调整单个列表项的底部边距吗?

Question

我创建了一个包含CSS列表的HTML表单。 但是，我想在以下HTML表单的"姓氏"字段和"确认"字段之后添加10个像素左右。 这可能吗？

<form>
<ul>
<li><label for="firstName">First Name:</label></li>
<li><input type="text" name="firstName" size="35" id="firstName"/></li>
<li><label for="lastName">Last Name:</label></li>
<li><input type="text" name="lastName" size="35" id="lastName"/></li>
<li><label for="passid">Password:</label></li>
<li><input type="password" name="password" size="35" id="password"/></li>
<li><label for="confirmation">Confirmation:</label></li>
<li><input type="password" name="confirmation" size="35"id="confirmation"/></li>
<li><label for="email">Email:</label></li>
<li><input type="text" name="email" size="35" id="email"/></li>
</ul>
</form>

我做了几个CSS和HTML修改，如下所示，但没有效果：

form ul li.extra
{
    margin-bottom:15px;
}
<li class="extra"><label for="lastName">Last Name:</label></li>
<li class="extra"><input type="text" name="lastName" size="35" id="lastName"/></li>

我也尝试过更简单的东西，比如HTML换行符，但没有一个对我的页面布局有任何影响。

是否可以调整单个列表项的底部边距属性？

谢谢！

Answer 1

在 li 上设置一个类：

HTML:
<ul>
   <li>1</li>
   <li>2</li>
  <li>3</li>
  <li class="extra">4</li>
  <li>5</li>
</ul>

.CSS：

ul li.extra{
    margin-top:15px;
}

Answer 2

这并不理想，但一种快速的方法是设置您感兴趣的 LI 的内联样式：

<li style="margin-bottom: 15px;">Whatever</li>

但更好的方法是添加类，这显然更容易应用于其他单独的 LI 标签：

li.single_li {
    margin-bottom: 15px;
}
<li class="single_li">Whatever</li>

如果它不起作用，它可能被父类/样式覆盖，请在您的 css/style 中尝试以下操作：

.CSS

li.single_li {
    margin-bottom: 15px !important;
}

内嵌

<li style="margin-bottom: 15px !important;">Whatever</li>

添加 ！important 可确保它被应用并且不会被父类覆盖。

添加了内联样式的 jsFiddle 示例