将 margin-left 添加到文本块答案

【问题标题】：adding margin-left to a block of text将 margin-left 添加到文本块
【发布时间】：2013-09-04 18:03:12
【问题描述】：

我正在尝试使用 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 的样式，它也会推动我的导航栏20px。

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

我不想在每个 <li> 中添加 class 或 ID，因为这样会破坏使用简单的方法来推动我的列表的意义。

提前致谢

【问题讨论】：

能否请您使用 jsfiddle 或 codepen 创建一个演示？
改为向ul 添加一个类？

标签： html css html-lists

【解决方案1】：

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

例如，

<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;}

希望这会有所帮助。

【讨论】：

啊！为什么我没有添加

【解决方案2】：

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

li {
 margin-left: 20px;
}

nav li {
 margin-left: 0px;
}

【讨论】：

【解决方案3】：

为你的列表使用一个类

HTML

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

CSS

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

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

【讨论】：

【解决方案4】：

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

例如 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）。

【讨论】：