css - 元素宽度与最宽的子元素一样宽,并排而不占用全宽
问题描述
我试图对两个相邻的按钮进行编程。它们应该具有相同的宽度/较小的元素应该获得最大子元素的宽度。他们必须尽可能灵活地包装。(响应式)
我尝试display: inline-block
了父母,但显然这只适用于彼此的元素(不是并排)。我也尝试过使用display: inline-flex
,flex-direction
但我再次得到了不并排的元素。
使用 非常容易display: grid
,但是我不能让它变得灵活和响应迅速。
由于这个问题非常具体(我认为),我做了一个codepen:https ://codepen.io/obendev/pen/vYYJGxj
.buttons {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.buttons-grid {
display: grid;
grid-gap: 0.5rem;
grid-template-columns: 1fr 1fr;
margin-left: auto;
margin-right: auto;
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
margin-top: 4rem;
}
.button a {
align-items: center;
background-color: #ffcf2f;
border-radius: 80px;
color: #fff;
cursor: pointer;
display: flex;
justify-content: center;
padding: 1.375rem 2.75rem;
text-transform: uppercase;
transition: background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
@media (hover: hover) {
.button a:hover {
background-color: #0562af;
}
}
.button a svg {
fill: currentColor;
height: 1rem;
margin-right: 0.375rem;
width: 1rem;
}
.site-width {
margin-left: auto;
margin-right: auto;
max-width: 80rem;
padding: 2rem 3.125rem;
}
a {
color: currentColor;
cursor: pointer;
text-decoration: none;
transition: color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
html {
font-family: sans-serif;
font-size: 16px;
font-weight: 400;
}
<div class="site-width">
<div class="buttons">
<div class="button">
<a href>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<path d="M62.2 45.2l-14-6c-1.2-.5-2.7-.2-3.5.9l-6.2 7.6c-9.7-4.6-17.6-12.4-22.1-22.1l7.6-6.2c1-.8 1.4-2.3.9-3.5l-6-14c-.6-1.3-2-2.1-3.4-1.7l-13 3C1 3.4 0 4.6 0 6c0 32.1 26 58 58 58 1.4 0 2.6-1 2.9-2.3l3-13c.3-1.4-.4-2.9-1.7-3.5z"></path>
</svg>
<span>short</span>
</a>
</div>
<div class="button">
<a href>looooooooooooooong</a>
</div>
</div>
<div class="buttons-grid">
<div class="button">
<a href>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<path d="M62.2 45.2l-14-6c-1.2-.5-2.7-.2-3.5.9l-6.2 7.6c-9.7-4.6-17.6-12.4-22.1-22.1l7.6-6.2c1-.8 1.4-2.3.9-3.5l-6-14c-.6-1.3-2-2.1-3.4-1.7l-13 3C1 3.4 0 4.6 0 6c0 32.1 26 58 58 58 1.4 0 2.6-1 2.9-2.3l3-13c.3-1.4-.4-2.9-1.7-3.5z"></path>
</svg>
<span>short</span>
</a>
</div>
<div class="button">
<a href>looooooooooooooong</a>
</div>
</div>
</div>
底部的“解决方案”是最终结果,我试图让它看起来像这样,这就是我之前谈到的网格解决方案。
解决方案
推荐阅读
- python - 用pyspark中所有列的平均值填充缺失值
- sql - Redshift 加入数组中的每个值
- node.js - BodyParser 已弃用
- swift - 我们如何快速在表格视图底部添加展开和折叠单元格
- rust - 了解 FLTK 中的小部件损坏
- java - 如何从 Quarkus 的属性文件中设置基本 URL 和公共休息 URL?
- build.gradle - 如何在 GitHub Actions 中获取或解析 Jacoco 报告的覆盖率
- flutter - 热重载后状态管理不起作用
- java - 如何在 orm.xml 中的其他命名查询中重用命名的通用 HQL 查询
- amazon-web-services - 如何在 AWS 中启用 IAM 的计费权限?