基于Foundation框架实现内联表单的布局问题咨询

嘿，我看你在用Foundation做内联表单时，遇到了标签跑到输入框上方的问题——这多半是网格结构写错或者类名用错导致的，咱们来快速修正：

首先看你代码里的明显问题：你写的small-3 rows是笔误，应该是small-3 columns（Foundation 6+里更推荐用cell代替columns），另外嵌套的row结构也没必要，反而会打乱布局逻辑。

修正后的基础内联表单代码 #

下面是能让标签和输入框横向排列的正确结构，我保留了你想要的标签右对齐需求：

<form>
  <!-- 第一组表单控件：Login输入框 -->
  <div class="grid-x grid-margin-x align-middle">
    <div class="small-3 cell">
      <label for="right-label" class="right inline">Login</label>
    </div>
    <div class="small-9 cell">
      <input type="text" id="right-label" placeholder="Enter your login">
    </div>
  </div>

  <!-- 第二组表单控件：Password输入框（示例补充） -->
  <div class="grid-x grid-margin-x align-middle margin-top-1">
    <div class="small-3 cell">
      <label for="password" class="right inline">Password</label>
    </div>
    <div class="small-9 cell">
      <input type="password" id="password" placeholder="Enter your password">
    </div>
  </div>
</form>

关键要点解释 #

• 用grid-x替代嵌套的row：Foundation 6及以后版本推荐用grid-x作为网格容器，grid-margin-x能给列之间添加合适的间距，避免控件挤在一起
• align-middle：让标签和输入框垂直居中对齐，避免视觉上的错位，提升表单的美观度
• cell类：替代旧版本的columns，是官方推荐的更简洁的类名
• right inline：right让标签右对齐，inline确保标签不会独占一行，和输入框保持在同一水平线上

如果需要紧凑的单行内联表单 #

要是你想把多个表单控件（比如登录、密码、提交按钮）都放在同一行，可以用这种更紧凑的写法：

<form class="grid-x grid-margin-x align-middle">
  <div class="cell shrink">
    <label for="login" class="inline">Login</label>
  </div>
  <div class="cell auto">
    <input type="text" id="login" placeholder="Your login">
  </div>

  <div class="cell shrink">
    <label for="pass" class="inline">Password</label>
  </div>
  <div class="cell auto">
    <input type="password" id="pass" placeholder="Your password">
  </div>

  <div class="cell shrink">
    <button type="submit" class="button primary">Submit</button>
  </div>
</form>

这里cell shrink让标签和按钮只占必要的宽度，cell auto让输入框自动填充剩余空间，实现真正的单行内联布局。

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