javascript - Highlight links wwith background pane bigger than link-object without padding -


http://jsbin.com/okac/1/edit

html:

<ul>     <li>       <a class='active' href='#'>link</a></li>     <li><a href='#'>link</a></li> </ul> 

css:

.active {     background:grey;     border-radius:2px;     padding:4px; } 

this basic example of im trying achieve - highlighting ordinary links effect bigger link-element itself. here use padding, breaks consistency of visual structure of page - highlighted link shifted relative regular one.
possible solutions have in mind:

  • add padding links.
  • with js, switch active link absolute positioning current coordinates.

is there other solutions?

you can add negative margin remove space around link:

a {     padding: 4px;     margin: -4px; } 

other way add outline instead of padding:

a {     outline: 4px solid grey; } 

Comments

Popular posts from this blog

java - Run a .jar on Heroku -

java - Jtable duplicate Rows -

validation - How to pass paramaters like unix into windows batch file -