How can I make list item with uniform length?

Question

I am creating an unordered list for horizontal tab component. I want each list item filling in one of three boxes with uniform length and height shown on the image. Here is my jsFiddle and javascript. What should I change on CSS to make this happen?

na.cx/i/a7J56X.png

$(function(){
    $('#tabs').tabs({
        event: "mouseover"
    });
});

Here is the jsfiddle.

Pls set the image for better understanding your problem. Thanks. — arman1991, Jun 26 '15 at 01:06
na.cx/i/a7J56X.png this is the link to the image. I'll try to upload it to stackoverflow but I failed yesterday. — Ken Kwok, Jun 26 '15 at 01:10

score 1 · Accepted Answer · edited May 23 '17 at 11:58

1

HTML & CSS: How to create four equal size tabs that fill 100% width?

I tried table display yesterday but did not work yesterday. Yet, it seems to work today so I post it in case someone shares the same problem with me

edited May 23 '17 at 11:58

Community

1
1

answered Jun 26 '15 at 01:29

Ken Kwok

388
3
19

score 1 · Answer 2 · answered Jun 26 '15 at 02:05

Nice solution.

One of advices and solutions is also to take look on bootstrap components, and just include the classes correctly:

<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
 <body>
<ul class="nav nav-pills nav-justified">
  <li role="" class="active"><a href="#">Home</a></li>
  <li role=""><a href="#">Profile</a></li>
  <li role=""><a href="#">Messages</a></li>
</ul>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
      </body>
  </html>

I think this can also be helpful, you can save a lot of time with design :)

How can I make list item with uniform length?

2 Answers2