Css 向水平列表中的单个列表项添加边距

是否可以在水平无序列表中的某个项目顶部添加边距

我制作了一个以云为主题的导航条，但我不希望所有的云都在一条直线上，所以我正在尝试制作一个这样的导航条，使它们不在一条直线上

这些答案都不适用于我，它根本不会更改列表项，因此我在此处添加了一些代码：

HTML:

<div id="clouds">
    <ul>
        <li id="home"><a href="#"><img src="buttons/home.png"></a></li>
        <li id="info"><a href="#"><img src="buttons/Info.png"></a></li>
        <li id="designs"><a href="#"><img src="buttons/Designs.png"></a></li>
        <li id="contact"><a href="#"><img src="buttons/Contact.png"></a></li>
    </ul>
</div>

body{
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(94,132,19)),
        color-stop(0.6, rgb(124,180,34)),
        color-stop(0.6, rgb(252,253,255)),
        color-stop(1, rgb(117,178,209))
    );
    background-image: -moz-linear-gradient(
        center bottom,
        rgb(94,132,19) 0%,
        rgb(124,180,34) 60%,
        rgb(252,253,255) 60%,
        rgb(117,178,209) 100%
    );
    min-height: 500px;    
    text-align: center;
    background-position: absolute;
}
#sun{
    height: 72px;
    width: 72px;
    float: right;
    background-image: url('sun.png');
}

/*---NAVIGATION---*/
#home img:hover{
    background-image: url('buttons/home.png');
}
#info img:hover{
    background-image: url('buttons/info.png');
}
#designs img:hover{
    background-image: url('buttons/designs.png');
}
#contact img:hover{
    background-image: url('buttons/contact.png');
}
#clouds ul, li{
    display: inline;
    margin: 40px;
}
#clouds ul{
    display: inline;
}
/*---NAVIGATION END---*/

#wrap h1{
    margin-top: 175px;
    font-family: code bold;
    color: white;
    text-align: center;
    text-shadow: 2px 2px 5px #000;
}
#wrap{
    font-family: code bold;
    color: white;
    text-shadow: 2px 2px 5px #000;
    width: 500px;
    text-align: center;
    margin: 0 auto;
}
#text{
    font-family: kartika;
    font-size: 22;
    -moz-column-count: 2;
    -moz-column-gap: 3em;
    -moz-column-rule: 1px dashed fff;
    -webkit-column-count: 2;
    -webkit-column-gap: 3em;
    -webkit-column-rule: 1px dashed fff;
}

<ul>
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li class="extra">4</li>
   <li>5</li>
</ul>

ul li.extra{
    margin-top:15px;
}

我决定添加整个样式表，因为其中的某个地方可能存在错误，可能导致列表项边距不起作用，尽管我似乎找不到任何问题

感谢您迄今为止的回答和评论

似乎只有当列表具有浮动时，才可以更改单个项目的边距：如果列表左移，则可以将列表居中，而不是将其左移，以使其工作？HTML:

<ul>
   <li>item 1</li>
   <li>item 2</li>
   <li class="certain_item">item 3</li>
   <li>item 4</li>
   <li>item 5</li>
   <li>item 6</li>
</ul>

---

JS Fiddle:

我有两种解决方案供您选择：

您可以使用CSS3中的

：nth-child（）

选择器。您将希望定位的

li

的编号放在括号中（尽管此方法不支持IE8及以下版本）：

在

li

上设置一个类：

HTML:

<div id="clouds">
    <ul>
        <li id="home"><a href="#"><img src="buttons/home.png"></a></li>
        <li id="info"><a href="#"><img src="buttons/Info.png"></a></li>
        <li id="designs"><a href="#"><img src="buttons/Designs.png"></a></li>
        <li id="contact"><a href="#"><img src="buttons/Contact.png"></a></li>
    </ul>
</div>

body{
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(94,132,19)),
        color-stop(0.6, rgb(124,180,34)),
        color-stop(0.6, rgb(252,253,255)),
        color-stop(1, rgb(117,178,209))
    );
    background-image: -moz-linear-gradient(
        center bottom,
        rgb(94,132,19) 0%,
        rgb(124,180,34) 60%,
        rgb(252,253,255) 60%,
        rgb(117,178,209) 100%
    );
    min-height: 500px;    
    text-align: center;
    background-position: absolute;
}
#sun{
    height: 72px;
    width: 72px;
    float: right;
    background-image: url('sun.png');
}

/*---NAVIGATION---*/
#home img:hover{
    background-image: url('buttons/home.png');
}
#info img:hover{
    background-image: url('buttons/info.png');
}
#designs img:hover{
    background-image: url('buttons/designs.png');
}
#contact img:hover{
    background-image: url('buttons/contact.png');
}
#clouds ul, li{
    display: inline;
    margin: 40px;
}
#clouds ul{
    display: inline;
}
/*---NAVIGATION END---*/

#wrap h1{
    margin-top: 175px;
    font-family: code bold;
    color: white;
    text-align: center;
    text-shadow: 2px 2px 5px #000;
}
#wrap{
    font-family: code bold;
    color: white;
    text-shadow: 2px 2px 5px #000;
    width: 500px;
    text-align: center;
    margin: 0 auto;
}
#text{
    font-family: kartika;
    font-size: 22;
    -moz-column-count: 2;
    -moz-column-gap: 3em;
    -moz-column-rule: 1px dashed fff;
    -webkit-column-count: 2;
    -webkit-column-gap: 3em;
    -webkit-column-rule: 1px dashed fff;
}

<ul>
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li class="extra">4</li>
   <li>5</li>
</ul>

ul li.extra{
    margin-top:15px;
}

根据新问题要求编辑：。这应该可以做到：

如果你有一个静态的导航项，你可以使用第n个子项来设置它们的样式

因此，使用此html：

<ul id="nav">
    <li><a href="#">Nav Item 1</a></li>
    ...
</ul>

注意：浏览器对第n个子项的支持有些有限（IE9+、Safari 3.1+、FF 3.5+、Chrome）

更改：

#clouds ul, li{
    display: inline;
}

致：

这应该允许您以您尝试的方式使用上下页边距/填充。（如果Internet Explorer的内联块出现问题，请尝试将显示和边距移到列表项中的

标记（

#a

），因为旧版本的IE应与默认为内联的元素配合使用

---

另外，

#clouds ul，li

是否应该包含逗号？如果是这样，那么您可以删除它后面的

#clouds ul

。但是，当您使用它时，它会将您的所有列表项内联并为其提供您所拥有的边距。

如何向包含的

元素添加边距？这不是我要找的，我指的是horiz前面的列表，很抱歉造成混淆：P@Henry-95我只是演示如何将边距应用于单个

li

项目。您可以随意设置列表的其他部分：）啊，是的，我知道，但我需要更改水平列表中项目的边距，不是垂直列表请查看我的答案的更改我注意到您在li样式中添加了一个float:left，是否可以删除float:left并保留页边空白？我需要我的导航栏centred@henry-95：你能用绝对链接更新你的图片吗。这样，我就可以看到网站的实际外观，并能够对其进行修改是的，我也需要帮助，当窗口较大时，它们排成一行，我需要所有的云始终保持水平，即使窗口很小：）为此，你需要在它们的容器上设置一组，所以你需要像

#云{最小宽度：500px；}

（超过500px的灵活宽度）或

#云{宽度：500px；}

（固定宽度为500px，与视口大小无关）。当然，500px是一个任意的数字，应该是足够容纳所有云的大小。不过，我觉得它看起来有点像一个圆圈是的，谢谢你把它修好了，不过我得把它放进身体里。您知道如何解决云的主要问题吗？将您的

li

更改为

inline block

确实允许它尊重上下边距和填充，但取决于它周围的元素的位置/大小，它可能没有任何作用。你也可以使用你最喜欢的浏览器的开发工具（Firefox需要额外的下载-Firebug）来突出显示边距或填充的实际位置，看看发生了什么。是的，我会看一看，我已经把我迄今为止所做的放在了JSFIDLE上，你可以在这里看一看：嗯，小提琴代码的一个问题是，您在标记中使用了

class=home

，但在CSS中使用了

#home

（ID）。您需要确保您的HTML和CSS匹配。在这种情况下，使用ID应该很好，特别是如果每个ID的代码略有不同的话。