0

我创建了一个包含 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 换行符，但没有一个对我的页面布局产生任何影响。

是否可以调整单个列表项的 margin-bottom 属性？

谢谢！

4

2 回答 2

2

在 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;
}
于 2012-08-10T15:15:29.633 回答
1

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

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

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

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

<li class="single_li">Whatever</li>

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

CSS

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

排队

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

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

添加了内联样式的 jsFiddle 示例

于 2012-08-10T15:11:52.263 回答