CODEWITHSUNDEEP
csstagshtml-listsborder
Datacrawler
Datacrawler

Reputation: 2876

How to add margin in the border of a li tag?

I have a menu where I want the li tags have a border. I am doing this in my css :

.sf-menu li a
    {
       list-style-position:inside;
       border: 2px solid white;
       color:#fffefe;
    }

But it is a bit ugly. I want to make it work like that : HERE HERE by putting some margins. I am trying but nothing and I can't think of relevant tags in order to search on google.

Upvotes: 1

Views: 941

Answers (4)

Datacrawler
Datacrawler

Reputation: 2876

This works as well. I would like to find other solutions as well though. 

.sf-menu li a
{
     list-style-position:inside;
     border: 2px solid white;
     border-radius: 8px;
     color:#fffefe;
     padding:8px;
}

Upvotes: 0

napo
napo

Reputation: 869

Try this jsFiddle. I think this is what you're after: http://jsfiddle.net/nnLjK/3/

I split your .sf-menu and your .sf-menu CSS declarations a bit...

Upvotes: 0

Mihey Egoroff
Mihey Egoroff

Reputation: 1542

Firstly, list-style-position should be applied to the <UL> tag. Secondly, you should set the border to the <li> tag, and look at your code:

  .sf-menu li a

So you are selecting <a> inside of <li> in the class .sf-menu, and you need to select just <li>, simply: 

.sf-menu li {
   //your styles here
}

Please make an example on jsfiddle (or any other platform) for further help

Upvotes: 1

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

Then you need to set border on li tag not in a tag

.sf-menu li
    {
       border: 2px solid white;
    }

And also list-style-position should be defined in ul tag not in a tag

.sf-menu
    {
       list-style-position:inside;
    }

Upvotes: 0

Related Questions