我正在尝试创建两个水平按钮，它们的宽度相同 - 基于最长按钮的宽度。
- 每个按钮的文本内容可以由用户在单独的页面上调整...因此我无法控制他们的文本长度/第一个按钮和第二个按钮的文本长度。
- 我希望按钮能够根据最长文本的长度进行调整，但不要超出页面的宽度（例如在移动设备上）。
- 我希望按钮默认水平显示，但如果它们不能水平显示，则堆叠为列。
- 如果整个文本无法适应，我需要按钮的文本换行。
我尝试了多种选项...但无法使其正常工作！
- 当使用网格布局grid-template-colums: 1fr 1fr时，我找不到一种方法来在需要时将按钮堆叠为列。
- 当使用flex和flex:1 1 0时，我找不到一种方法来使按钮的宽度适应文本的长度。
请帮忙！
非常感谢！ 达米安。
让我们尝试这个选项。您对这种方法有什么不喜欢的地方？
div { background-color: rgba(0, 0, 0, 0.1); } .button-container { padding: 16px; display: flex; gap: 16px; } .horizontal-button { padding: 16px; flex: 1; text-align: center; word-wrap: hypens; } @media (max-width: 360px) { .button-container { flex-direction: column; } }A:在这种情况下，容器/按钮占据了整个页面的宽度...它们不会根据文本的宽度进行调整。
Q:好的，那么：
div { background-color: rgba(0, 0, 0, 0.1); } .button-container { margin: auto; padding: 16px; box-sizing: border-box; display: flex; align-items: stretch; gap: 16px; max-width: max-content; } .horizontal-button { display: flex; flex-direction: column; justify-content: center; padding: 16px; flex: 1; text-align: center; max-width: 50%; } @media (max-width: 360px) { .button-container { flex-direction: column; } .horizontal-button { hyphens: auto; max-width: unset; } }