css - 像 css 中的 ul 表

Question

我正在为使用 ul 和 li 元素创建漂亮的菜单而苦恼。例如当我只有 4 个元素菜单时，我给它们相同的宽度 20%，它永远不会中断，即使对于 6 个元素菜单，它也同样有效，我给它们 16,66666% 的宽度，这是 CSS 支持的。但是现在有一个问题，这只适用于可以具有相同宽度的元素，我正在寻找的是不同宽度元素的解决方案并且有一个条件，容器必须每次都是 100% 或 1000px(只是全宽)并且li 不能溢出容器，容器必须像这样居中:

<div class="container">
  <ul>
     <li>Item1</li>
     <li>Longnameitem 2</li>
     <li>it3</li>
     <li>SuperlongnameItem 4</li>
     <li>Item5</li>
  </ul>
</div>

通常我的 CSS 是这样的:

.container {
    position: relative;
    margin: 0 auto;
    width: 1000px;
    height: 30px;
}
.container ul {
    position: relative;
    width: 100%;
    height: 30px;
}
.container ul li {
    position: relative;
    width: 20%;
    display: block;
    float: left;
    margin: 0px;
}

这很好用，但我需要为每个 li “表格”动态宽度，有什么想法吗？技巧？表格单元格 CSS 技巧？或其他？ (如有错误请忽略，我只是打出来的例子)

JSFiddle

Answer 1

查看'flexbox'

第一个 Check here 因为它的浏览器支持。

Here is an example with your code menu (ul/li) code using flexbox

---

设置

CSS

    .grid {
      display: -webkit-flex;
      display: flex;
    }
    .col {
       background: #ccc;
      padding: 30px;
    }
    .fluid {
        flex: 1;
    }
   .fixed {
     background: red;
     width: 400px;
    }

标记

<div class="grid">
  <div class="col fluid"> ...</div>
  <div class="col fixed"> ...</div>
  <div class="col fluid"> ...</div>
</div>

注意我们如何在这些“布局”元素上设置填充，没关系，注意我们如何不必“清除” float 。很棒的东西。

有一个晶圆厂example here作者:CSS Tricks 的 Chris Coyier，上面的片段摘自。

---