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

本文介绍了向水平列表中的单个列表项添加边距的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

我已经制作了一个以云为主题的导航栏，但是我不希望所有云都成一直线，所以我正在努力做到不让所有云都成一行. /p>

这些答案都没有对我有用，它根本不会改变列表项，因此我在这里添加了一些代码:

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>

CSS:

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

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

感谢到目前为止的回答和评论.

似乎只有在列表浮动的情况下，才能更改单个项目的边距:将其置于左侧，可以将列表居中放置而不是将其向左浮动以使其起作用?

解决方案

我为您提供了两种解决方案: http://jsfiddle.net /8avbq/5/

您可以使用CSS3中的:nth-child()选择器.将要定位的li的编号放在方括号中(尽管此方法将不支持IE8及以下版本):
```
ul li:nth-child(2){
     margin-top:15px;
     background: red;
}
```

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

:基于新的问题要求.这应该可以解决问题: http://jsfiddle.net/A8mAY/7/

Is it possible to add a margin to the top of a certain item in a horizontal unordered list?

I've made a cloud-themed navigation bar, but I don't want all the clouds to be all in one straight line, so I'm trying to make it so they aren't all in one line.

None of these answers have worked for me, it doesn't change the list items at all, so I've added some of the code here:

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>

CSS:

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

I've decided to add the whole of my stylesheet because there might be an error in there somewhere that might be causing the list item margin to not work, although I can't seem to find any problems.

Thanks for the answers and comments so far.

It seems changing the margin of a single item only works if the list has float: left to it, it is possible to center the list instead of floating it to the left to make it work?

解决方案

I have two solutions for you: http://jsfiddle.net/8avbq/5/

You can use the :nth-child() selector from CSS3. You put the number of the li you want to target in the brackets (This method will not support IE8 and below though):
```
ul li:nth-child(2){
     margin-top:15px;
     background: red;
}
```

Set a class on the 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;
}

EDIT : Based on new question requirements. This should do the trick: http://jsfiddle.net/A8mAY/7/

这篇关于向水平列表中的单个列表项添加边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！