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

沃梦达教程前端问题

2022-01-01

How to create a row of elements of equal width inside an inline container? Possibly using flexbox(如何在内联容器内创建一行等宽的元素？可能使用FlexBox)

本文介绍了如何在内联容器内创建一行等宽的元素？可能使用FlexBox的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试创建具有以下功能的一行元素：

在内联挡路容器内(该容器旁边需要有内容)
都是相同的宽度
自动调整大小，使其宽度足以容纳最宽的元素而不会溢出
自动调整大小以使仅包含最宽的元素而不会溢出

我目前的努力是使用FlexBox，但还不能满足所有这些条件。我的最新尝试(到目前为止在Chrome中测试)低于条件3，但不满足条件3。

我是不是遗漏了什么？或者是否有其他可行的方法？

live example

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

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

(对于此测试，我没有使用浏览器兼容性供应商前缀的版本，因此您可能必须选择具有良好FlexBox支持的浏览器)。

推荐答案

我能够做到这一点，方法是对父元素使用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

这篇关于如何在内联容器内创建一行等宽的元素？可能使用FlexBox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！

沃梦达教程

本文标题为：如何在内联容器内创建一行等宽的元素？可能使用FlexBox

上一篇： Socket.IO-客户端与Socket.IO

下一篇：获取响应中缺少标头

基础教程推荐

学习HTML

学习jQuery

学习Laravel

学习CSS3

学习Vue.js

学习Bootstrap5

学习ThinkPHP

学习AJAX