html - 使用 css 创建水平跨越但按钮保持单词大小的按钮

Question

我正在尝试使用 HTML 和 CSS 创建电子邮件模板。我目前在标题下有“FROM”和“SUBJECT”。我想让这两个按钮只有在我单击一个或另一个时才可单击。目前，我只有两个宽度较大的按钮。但我想要一个按钮类和一个创建空间的跨度类。我当前的代码如下:

.myBtnHeader {
  width: 300px;
  text-align: left;
  font-weight: bold;
  color: black;
  padding: 1px;
  margin: 4px 2px;
}

.unread {
  margin-right: 1.25em;
  padding: 10px;
}

<div data-role="controlgroup" data-type="horizontal">
  <a data-role="header" class="btn myBtnHeader"><span class="unread"><u>FROM</u></span></a>
  <a data-role="header" class="btn myBtnHeader"><span class="unread"><u>SUBJECT</u></span></a>
</div>

如果有人能够提供帮助，那就太棒了。我希望它看起来像这样:

|按钮 | -------- 跨度-------- |BUTTON|

很抱歉缺少格式

Answer 1

如前所述，CSS Grid 可能是一个很好的解决方案。但是，我不会使用网格间隙，而是使用一个可以 1fr 宽的空网格列(占用所有可用的额外空间)。这将使它响应视口(viewport)宽度的变化或在不同尺寸的屏幕上查看。

我建议您尽可能地学习 CSS Grid 和 Flexbox(另一个有用的工具)。请参阅这些文章:

https://css-tricks.com/snippets/css/complete-guide-grid/

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

检查这个codepen: https://codepen.io/juan-g-04/pen/PoqoyyY

使用浏览器的开发人员工具检查布局。在 Mozilla Firefox 上，您可以像这样突出显示网格或 flexbox : (请参阅工具提示所在的图像底部。并注意突出显示网格内部边界的粉红色线条)