SitePoint Sponsor

User Tag List

Results 1 to 20 of 20

Threaded View

  1. #1
    SitePoint Zealot
    Join Date
    Dec 2008
    Posts
    122
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Add equal amount of padding to anchors in a fluid horizontal list

    I've spent quite a bit of time looking at this, and I think it's probably not possible with CSS. But if someone can prove me wrong, that would be great!

    What I'm looking to do is to have a horizontal navigation menu where there is an equal spacing between each item, but each item may be a different size. The menu needs to be fluid, so that the gap between each item reduces / increases as the page width reduces / increases.

    The justify trick detailed here: http://stackoverflow.com/questions/6...ly-spaced-divs is along the right lines. But when I say an equal spacing between the menu items, what I really mean is that I want equal padding applied to the anchors that make up the list. There should be no actual spacing between the list items.




    HTML Code:
    <ul>
    	<li><a href="#">Option One</a></li>
    	<li><a href="#">Option Two</a></li>
    	<li><a href="#">This is option three</a></li>
    	<li><a href="#">Opt 4</a></li>
    	<li><a href="#">Option 5</a></li>
    </ul>
    The nearest I've been able to get so far is using the CSS3 calc function, but this requires knowing the number of items in the menu, and the width of each item, which is not really realistic. http://jsfiddle.net/TN9hf/2/embedded/result/
    Code:
    ul{
    	list-style-type: none;
      width: 80%;
    }
    li{
    	display: inline-block;
        text-align: center;
        padding: 0;
        margin: 0;
        font-size: 105%;
    }
    /*combined width of list items with no padding = 79+161+86+60+135=521px*/
    li:nth-child(1){
    	width: calc((100% - 521px)/5 + 79px);
    }
    li:nth-child(2){
    	width: calc((100% - 521px)/5 + 161px);
    }
    li:nth-child(3){
    	width: calc((100% - 521px)/5 + 86px);
    }
    li:nth-child(4){
    	width: calc((100% - 521px)/5 + 60px);
    }
    li:nth-child(5){
    	width: calc((100% - 521px)/5 + 135px);
    }
    li a{
        display: block;
        padding: 5px 0;
        background: #999;
    }
    Attached Images Attached Images


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •