CSS实现水平按钮,无需其他技术
P粉893457026
2023-09-04 12:29:02
<p>我正在尝试创建两个水平按钮,它们的宽度相同 - 基于最长按钮的宽度。</p>
<ul>
<li>每个按钮的文本内容可以由用户在单独的页面上调整...因此我无法控制他们的文本长度/第一个按钮和第二个按钮的文本长度。</li>
<li>我希望按钮能够根据最长文本的长度进行调整,但不要超出页面的宽度(例如在移动设备上)。</li>
<li>我希望按钮默认水平显示,但如果它们不能水平显示,则堆叠为列。</li>
<li>如果整个文本无法适应,我需要按钮的文本换行。</li>
</ul>
<pre class="brush:php;toolbar:false;"><div class="button-container">
<div class="horizontal-button" data-role="yes">是</div>
<div class="horizontal-button" data-role="no">不,抱歉 - 我不能做到</div>
</div></pre>
<p>我尝试了多种选项...但无法使其正常工作!</p>
<ul>
<li>当使用网格布局grid-template-colums: 1fr 1fr时,我找不到一种方法来在需要时将按钮堆叠为列。</li>
<li>当使用flex和flex:1 1 0时,我找不到一种方法来使按钮的宽度适应文本的长度。</li>
</ul>
<p>请帮忙!</p>
<p>非常感谢!
达米安。</p>
让我们尝试这个选项。您对这种方法有什么不喜欢的地方?
A: 在这种情况下,容器/按钮占据了整个页面的宽度...它们不会根据文本的宽度进行调整。
Q: 好的,那么: