Question

我尝试使用以下功能创建一行元素：

位于内联块容器内（需要在其旁边有内容）
宽度相同
自动调整大小以包含最宽的元素而不会溢出
自动调整大小足以让只包含最宽的元素而不会溢出

我目前的努力是使用flexbox，而且还没有能够满足所有这些条件。我最近的尝试（到目前为止在Chrome中测试过）是在下面，但是条件3没有达到。

我有什么遗失的东西吗？或者是否有可行的替代方法？

＆＃13;

div {
  display: inline-block;
}

ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

li {
  flex: 1;
}

a {
  display: block;
  padding: 1em;
  border: solid black 1px;
}

＆＃13;

<div>
  <ul>
    <li>
      <A href="/">foo</a>
    </li>
    <li>
      <A href="/">barrrrrrrrr</a>
    </li>
    <li>
      <A href="/">foooooooooooo</a>
    </li>
    <li>
      <A href="/">foo</a>
    </li>
    <li>
      <A href="/">hello&nbsp;world</a>
    </li>
  </ul>
</div>

＆＃13;

（我没有在此测试中使用浏览器兼容性供应商前缀版本，因此您可能必须选择具有良好Flexbox支持的浏览器。）

Answer 1

另一种方法是将display:table与table-layout:fixed一起使用，然后将基础单元格的宽度设置为1%，迫使浏览器使用算法为所有单元格使用相等的宽度。

div.inline {
    display:inline-block;
    width:250px;
}
.table {
    display: table;
    table-layout: fixed;
    width:100%;
}
.cell {
    display: table-cell;
    border: 1px dotted red;
    width: 1%;
}

content
<div class='inline'>
    <div class='table'>
        <div class='cell'>lorem ipsum lorem ipsum</div>
        <div class='cell'>lorem</div>
    </div>
</div>
content

Answer 2

我能够通过在父元素上使用display: inline-grid并将属性grid-template-columns: 1fr 1fr 1fr添加到父元素来实现这一点（每列需要1fr）。

div.inline {
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
}

div.cell {
    border: 1px dotted grey;
    text-align: center;
}

content
<div class='inline'>
    <div class='cell'>lorem ipsum lorem ipsum</div>
    <div class='cell'>lorem</div>
</div>
content

Answer 3

这是否是可接受的解决方案？

如果内联块的区域足够宽，则会勾选所有点，如果它不够宽则会失败2。

    <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
<style>
  div {
    display: inline-block;
  }
  ul { 
    display: table; 
    margin: 0; 
    padding: 0; 
    list-style-type: none;
  }
  li {
    display: table-cell;
    width: 20%;
    text-align: center

  }
  a {
    display: block;
    padding: 1em;
    border: solid black 1px;
  }
  </style>
  </head>
<body>
  <div>
<ul>
  <li><A href="/">foo</a></li>
  <li><A href="/">barrrrrrrrr</a></li>
  <li><A href="/">foooooooooooo</a></li>
  <li><A href="/">foo</a></li>
  <li><A href="/">hello&nbsp;world</a></li>
  </ul>
  </div>
</body>
</html>

如何在内联容器中创建一行宽度相等的元素？可能使用flexbox

3 个答案: