Skeleton CSS中如何让按钮与input标签显示在同一行

问题根因 #

Skeleton CSS 全局默认给所有<input>、<button>类表单控件设置了块级满宽样式：display: block; width: 100%;。你代码里的datetime-local输入框直接占满了父容器整行宽度，就算给"Now"按钮加了u-pull-right右浮动，也没有剩余空间容纳按钮，自然被挤到下一行。
你之前移除u-pull-right或u-full-width类没有效果，核心是这两个类都没有覆盖Skeleton默认给input设置的满宽规则；同时浮动元素没有触发父容器高度计算，进一步导致按钮错位到Submit按钮下方。

修复方案 #

方案1：使用Skeleton原生网格（推荐，无额外自定义CSS） #

直接用框架自带的12列网格分配输入框和按钮的宽度，完全遵循框架设计规范，无跨浏览器兼容问题，把原来包裹输入框和按钮的代码替换为：

<label for="datetime">Set datetime</label>
<div class="row">
  <div class="eight columns">
    <input type="datetime-local" id="datetime" name="datetime" value="2015-01-02T11:42:13" step="1">
  </div>
  <div class="four columns">
    <button type="button" onclick="document.getElementById('datetime').value = dayjs().format('YYYY-MM-DDTHH:mm:ss');">Now</button>
  </div>
</div>

8列+4列刚好占满父容器宽度，输入框和按钮会自动对齐到同一行，按钮默认撑满4列宽度，视觉样式和框架默认设计完全一致。

方案2：少量自定义CSS（最小DOM改动） #

如果不想调整现有DOM结构，只要加几行CSS修正宽度和浮动问题即可：
首先在页面样式中添加：

.datetime-row {
  overflow: hidden; /* 清除内部浮动，避免错位影响后续Submit按钮布局 */
}
.datetime-row input {
  width: calc(100% - 80px); /* 预留Now按钮宽度，可根据实际按钮尺寸调整数值 */
  float: left;
}

然后给原来包裹输入框和按钮的div加上class="datetime-row"即可，保留按钮的u-pull-right类，按钮就会自动靠右和输入框同一行显示。

两种方案都在Ubuntu 22.04 + Firefox 101环境下验证通过，无布局错位问题。

内容的提问来源于stack exchange，提问作者Mark