Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question fit li's in the ul width

    Hi,
    How do I make li's of a ul have equal width occupying entire space of ul combined.
    Code:
    #content-tabs {
      background-color: #78ae09;
      float: left; /* LTR */
      margin: 20px 0;
      padding: 0;
    -moz-box-shadow: 0px 2px 3px #c4c4c4;-webkit-box-shadow: 0px 2px 3px #c4c4c4;box-shadow: 0px 2px 3px #c4c4c4;
      width:100%;
    }
    
    #content-tabs ul.primary,
    #content-tabs ul.secondary {
    /*  border-bottom: 1px solid #000;*/
      clear: both;
      float: left; /* LTR */
      margin: 0;
      padding: 7px 10px 0px 0px;
      width:100%;
      border:none;
    }
    
    #content-tabs ul.secondary {
      border-bottom: none;
      margin-top: 10px;
      text-transform: lowercase;
    }
    
    #content-tabs ul.primary li,
    #content-tabs ul.secondary li {
      border-style: none;
      display: inline-block;
      float: left; /* LTR */
      list-style: none;
      margin: 0 10px;
      padding: 0;
      white-space:nowrap;
    }
    Code:
    <div id="content-tabs" class="content-tabs block">
    				<div id="content-tabs-inner" class="content-tabs-inner inner clearfix">
    				 <ul class="tabs primary">
    				   <li class="active" ><a href="#" class="active">Organize</a></li>
    				    <li ><a href="#">Edit Blog Settings</a></li>
    				    <li ><a href="#">Create Post</a></li>
    
    				 </ul>
    				</div><!-- /content-tabs-inner -->
    				</div><!-- /content-tabs -->

  • #2
    Mr.
    Mr. is offline
    Regular Coder
    Join Date
    Feb 2011
    Posts
    112
    Thanks
    8
    Thanked 4 Times in 4 Posts
    if i know what you're saying correctly, you could do this:

    if you have a ul that is 100% in width and you have four li within that ul.. you could add...

    width: 25%;


    to your css selector.. #content-tabs ul.primary li,
    #content-tabs ul.secondary li {


  •  

    Tags for this Thread

    Posting Permissions

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