1

我正在尝试将margin-left:20px;我在网页中间的项目符号列表向内微调 20 像素。

<li>• Service level agreements to match your needs from next business day response to a two hour fix</li>
<li>• 24x7x365 service coverage</li>
<li>• Dedicated client management and UK based service des</li>
<li>• Network of fully qualified engineers and strategic stock locations</li>

我通过向 中添加样式来做到这一点li，效果很好，但我也在<li>我网站顶部的导航栏中使用，所以通过设置样式li，它也会将我的导航栏微调 20 像素。

我尝试<span>...</span>在我的列表中使用并添加样式，但这只会轻推顶行，而不是其余部分。

我不想在每一个中添加一个class或，因为这种方式破坏了简单的方法来推动我的列表。ID<li>

提前致谢

4

4 回答 4

2

使用类特异性选择器来实现这一点。

例如，

<ul class="justBullets">
<li>Service level agreements to match your needs from next business day response to a two hour fix</li>
<li>24x7x365 service coverage</li>
<li>Dedicated client management and UK based service des</li>
<li>Network of fully qualified engineers and strategic stock locations</li>
</ul>

CSS：

.justBullets li{margin-left:20px;}

希望这可以帮助。

于 2013-09-04T09:55:15.363 回答
0

为您的列表使用一个类

HTML

<ul class="listWithMargin">
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ul>

CSS

.listWithMargin li {
    margin-left:20px;
}

因此，边距只会影响标有“listWithMargin”类的列表

于 2013-09-04T09:55:33.390 回答
0

如果您不想添加 ids 或 classes，您可以将样式应用于所有 li，并在 CSS 样式表的最后一行，从导航栏的 li 中移除轻推。

li {
 margin-left: 20px;
}

nav li {
 margin-left: 0px;
}
于 2013-09-04T09:59:47.007 回答
0

另一种方法是，如果您绝对确定不想拥有额外的类，则通过定位它的包含元素（如果可用）来专门定位您想要移动的列表。

例如 HTML

<nav>
  <ul><li>...</li></ul>
</nav>

<div class="middleContent">
  <ul><li>...</li></ul>
</div>

CSS

.middleContent ul{ margin-left: 20px; }

这将忽略 nav 标记中的 UL，并仅针对 .middleContent DIV 中的 UL（或 UL）。

于 2013-09-04T10:03:12.020 回答