Adjust li width fit with ul width of the outer div/body

<nav role='navigation'>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Clients</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>

1

2

3

4

5

6

7

8

9

10

<ul>

<li><a href="#">About</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Clients</a></li>

<li><a href="#">Contact Us</a></li>

</ul>

</nav>

* {
  box-sizing:border-box;
}
ul {
  width:700px;
  margin:10px auto;
  text-align:center;
}
li {
  list-style:none;
  float:left;
  border:1px solid red;
  padding:10px 0;
}
a {
  background:lightgrey;
  display:block;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

* {

box-sizing:border-box;

}

ul {

width:700px;

margin:10px auto;

text-align:center;

}

li {

list-style:none;

float:left;

border:1px solid red;

padding:10px 0;

}

a {

background:lightgrey;

display:block;

}

(function( $ ){
  $.fn.autowidth = function() {
    return this.each(function() {        
        $('li', this).css({'width' : (100 / $('li', this).length) + '%'})
    });
  };
})( jQuery );

$(document).ready(function(){
    $('nav > ul').autowidth();    
});

1

2

3

4

5

6

7

8

9

10

11

(function( $ ){

$.fn.autowidth = function() {

return this.each(function() {

$('li', this).css({'width' : (100 / $('li', this).length) + '%'})

});

};

})( jQuery );

$(document).ready(function(){

$('nav > ul').autowidth();

});

Related posts