Question

我正在尝试使用margin-left:20px;将我在网页中间的项目符号列表推送20px。

<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>并添加样式，但这只会推动顶线，而不是其余部分。

我不想为每个class添加ID或<li>，因为这样可以简单地轻推我的列表。

提前致谢

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

希望这有帮助。

Answer 2

使用列表中的类

<强> HTML

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

<强> CSS

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

因此，保证金只会影响标有“listWithMargin”类的列表

Answer 3

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

li {
 margin-left: 20px;
}

nav li {
 margin-left: 0px;
}

Answer 4

另一种方法是，如果你完全确定你不想要额外的类，那就是专门针对你想要移动的列表，定位它的包含元素（如果有的话）。

e.g。 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）。

将margin-left添加到一个文本块

4 个答案: