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

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

谢谢！

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标记：</ p>

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 example of inline style

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

2 个答案: