#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Posts
    1
    Rep Power
    0

    <li> box-sizing (making links fit on 1 line)


    Hi All,

    I'm new to the site and pretty new to front end development so I hope someone can help me

    I have a simple navigation bar. Its consists of a ul with the page names in it and the li s have a link in them.
    The whole ul have a 2px bottom border which works with the box sixing. When I add a border-right to the list items it seems to break the box sizing and one of my list items gets pushed to the next line.


    Code:
    <nav>
    	<ul>
    		<li><a href="#">6 weeks </a></li>
    		<li><a href="#">3 mths</a></li>
    		<li><a href="#">4 mths</a></li>
    		<li><a href="#">6 mths</a></li>
    		<li><a href="#">9 mths</a></li>
    		<li><a href="#">12 mths</a></li>
    		<li><a href="#">18 mths</a></li>
    		<li><a href="#">2 years</a></li>
    		<li><a href="#">3 years</a></li>
    		<li><a href="#">4 years</a></li>
    	</ul>
    </nav>
    Here is the CSS

    Code:
    nav {  
    	margin: 0px auto;
        height: 60px;  
        width: 600px;  
        font-size: 8pt;  
        font-family: 'PT Sans', Arial, sans-serif;  
        font-weight: bold;  
        position: relative;  
    
    }  
    
    nav ul {  
        padding: 0;  
        margin: 0 auto;  
        width: 600px;  
        height: 100%;      
        box-sizing:border-box;
       border-bottom: 2px solid #283744; 
    }  
    
    nav li {  
        float: left;  
        box-sizing:border-box;
        border-right:1px solid #000;
    }  
    
    /* individual button backgrounda */
    
    nav li:nth-child(1) {  
       background-color: rgba(255, 255, 255, 0.1);
    }
    nav li:nth-child(2) {  
    
       background-color: rgba(255, 255, 255, 0.15);
    }
    nav li:nth-child(3) {  
    
       background-color: rgba(255, 255, 255, 0.20);
    }
    nav li:nth-child(4) {  
     
       background-color: rgba(255, 255, 255, 0.25);
    }
    nav li:nth-child(5) {  
     
       background-color: rgba(255, 255, 255, 0.30);
    }
    nav li:nth-child(6) {  
     
       background-color: rgba(255, 255, 255, 0.35);
    }
    nav li:nth-child(7) {  
    
       background-color: rgba(255, 255, 255, 0.40);
    }
    nav li:nth-child(8) {  
     
       background-color: rgba(255, 255, 255, 0.45);
    }
    nav li:nth-child(9) {  
      
       background-color: rgba(255, 255, 255, 0.50);
    }
    nav li:nth-child(10) {  
     
       background-color: rgba(255, 255, 255, 0.55);
    }
    nav a {  
        color: #fff;  
        display: inline-block;  
        width: 60px;  
        text-align: center;  
        text-decoration: none;  
        line-height: 60px;  
        text-shadow: 1px 1px 0px #283744;  
            box-sizing: border-box;  
        -moz-box-sizing: border-box;  
        -webkit-box-sizing: border-box;  
    }  
    
    h1 a {  
            text-decoration: none;  
            color: #ffffff;  
            position: absolute;  
      
            -webkit-mask-image: -webkit-gradient(linear, left top, left bottombottom, from(rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,0)), to(rgba(0,0,0,1)));  
            text-shadow: 0 2px 0 #e9e9e9;  
            -webkit-transition: all .3s;  
            -moz-transition: all .3s;  
            transition: all .3s;  
    }
    I'm sure this is something silly but any help would be greatly appreciated.

    Regards,

    Sean
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    39
    Rep Power
    2
    your <li>'s should also be inline-block, don't use float in this instance.

IMN logo majestic logo threadwatch logo seochat tools logo