如何制作长度统一的列表项？

Question

我正在为水平选项卡组件创建一个无序列表。我希望每个列表项都填充在图像上显示的具有统一长度和高度的三个框之一中。这是我的 jsFiddle 和 javascript。我应该在 CSS 上更改什么才能实现此目的？

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

这里是 jsfiddle.

Answer 1

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

我昨天尝试 table 显示，但昨天没有用。然而，它今天似乎有效，所以我 post 它以防有人和我有同样的问题

Answer 2

不错的解决方案。

建议和解决方案之一也是查看 bootstrap 组件，并正确包含类：

<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>

我觉得这也很有用，你可以在设计上节省很多时间:)

如何制作长度统一的列表项？

How can I make list item with uniform length?

html

javascript

css

grid

twitter-bootstrap