CODEWITHSUNDEEP
htmlcss
John.P
John.P

Reputation: 657

Getting distance between horizontal lists

I'm trying to get distant between my horizontal lists, but I don't know how to do it. I tried with targeting specific list and add padding, but it doesn't work.

https://jsfiddle.net/L58v1jr2/1/

In this case, I want more distance between Follow on Facebook and Subscribe by RSS

This is my code:

<div id="theheader">  
           <ul id="subscribe">

                <li class="facebook"><a href="#">Follow on Facebook</a></li>
                <li class="rss"><a href="#">Subscribe by RSS</a></li>
            </ul>
</div>

CSS:

#theheader ul#subscribe {
        float: right; margin: 22px 0 0 0; list-style: none;
    }
        #theheader ul#subscribe li {
            float: left; margin: 0 0 0 32px;
        }
            #theheader ul#subscribe li a {
                display: block; height: 16px; font: 13px Georgia, Serif; letter-spacing: 2px; color: #eeede6;
                text-decoration: none; padding: 1px 0 0 10px;

            }
            body #theheader .rss li a {
                padding: 1px 0 0 120px;   /*This doesnt work*/
            }

Upvotes: 2

Views: 39

Answers (1)

connexo
connexo

Reputation: 56753

You might want this:

https://jsfiddle.net/L58v1jr2/4/

I've also simplified your css selectors alot.

Basically all you do is add

#subscribe .rss {
    margin-left: 120px;
}

to your css.

Upvotes: 3

Related Questions