英文:
same-width childen in inline-flex
问题
我正在尝试将一组按钮显示为一个统一的组件，可以内联在段落中使用，例如。到目前为止，我发现的最佳方法是将它们包装在 <span> 中，并使用 display: inline-flex 进行样式设置。
它运行正常，但现在我还想使每个按钮具有相同的宽度，而不占用比必要更多的空间。换句话说，我希望每个按钮的宽度都与具有最长内容的按钮需要的最小宽度相同。
有没有办法只使用 CSS 来实现这一点？
以下是我目前的一些示例代码：
button {border: 1px gray solid;border-radius: 5px;}span.button-group {display: inline-flex;}span.button-group button:not(:last-child){border-top-right-radius: 0;border-bottom-right-radius: 0;border-right-width: 0;}span.button-group button:not(:first-child){border-top-left-radius: 0;border-bottom-left-radius: 0;}
<p>Here is a paragraph with a set of buttons:<span class="button-group"><button>A</button><button>Longer</button><button>B</button><button>C</button></span></p>
英文:
I'm trying to make a group of buttons appear as a unified component that can be used inline in a paragraph for example. The best way I've found so far is to wrap them in a <span> and style it with display: inline-flex.
It works fine, but now I would also like to make every button the same width, without taking up any more space than necessary. In other words, I want each button to be as wide as the one with the longest content needs to be minimally.
Is there a way to achieve that using only css?
Here's some example code of of what I have so far:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
button {border: 1px gray solid;border-radius: 5px;}span.button-group {display: inline-flex;}span.button-group button:not(:last-child){border-top-right-radius: 0;border-bottom-right-radius: 0;border-right-width: 0;}span.button-group button:not(:first-child){border-top-left-radius: 0;border-bottom-left-radius: 0;}
<!-- language: lang-html -->
<p>Here is a paragraph with a set of buttons:<span class="button-group"><button>A</button><button>Longer</button><button>B</button><button>C</button></span></p>
<!-- end snippet -->
答案1
得分: 4
据我所知，如果按钮的数量不同，使用 flexbox 确实不太可能，但您可以使用 CSS 网格布局来实现：
button {border: 1px gray solid;border-radius: 5px;}span.button-group {display: inline-grid;grid-auto-flow: column;grid-auto-columns: 1fr;}span.button-group button:not(:last-child) {border-top-right-radius: 0;border-bottom-right-radius: 0;border-right-width: 0;}span.button-group button:not(:first-child) {border-top-left-radius: 0;border-bottom-left-radius: 0;}
grid-auto-flow: column; 会自动创建足够的列以将所有项目放在一行中，grid-auto-columns: 1fr; 使所有列的宽度相同（因此所有列的宽度将与最宽的列相同）。
英文:
As far as I know it's not really possible using flexbox if the amount of buttons can differ, but you can use css grid for that:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
button {border: 1px gray solid;border-radius: 5px;}span.button-group {display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr;}span.button-group button:not(:last-child){border-top-right-radius: 0;border-bottom-right-radius: 0;border-right-width: 0;}span.button-group button:not(:first-child){border-top-left-radius: 0;border-bottom-left-radius: 0;}
<!-- language: lang-html -->
<p>Here is a paragraph with a set of buttons:<span class="button-group"><button>A</button><button>Longer</button><button>B</button><button>C</button></span></p>
<!-- end snippet -->
grid-auto-flow: column; makes automatically enough columns to put all items in one row, grid-auto-columns: 1fr; makes all columns the same width (so all will be the same as the largest one).
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论