如何为并排的按钮与链接添加间距且避免换行？

我看了你的代码，问题出在登录按钮用的btn-block类上——这个类会强制按钮占满父容器的整个宽度，所以不管你怎么调整链接的padding，按钮本身就占了一整行，链接自然只能换行到下面。这里给你两种简单靠谱的解决方案，你可以按需选择：

方法一：Flex布局（推荐，现代浏览器友好） #

这种方法代码简洁，布局灵活，还能轻松处理垂直对齐和间距：

修改后的HTML #

把原来的按钮和链接部分改成下面这样，给它们套一个统一的容器，同时去掉按钮的btn-block类：

<div class="auth-actions">
  <button class="btn btn-lg btn-primary btn-signin" type="submit" name="submit">Sign in</button>
  <a href="register4.php" id="underlining" class="forgot-link"> Forgot Password? </a>
</div>

对应的CSS样式 #

.auth-actions {
  display: flex;
  align-items: center; /* 让按钮和链接垂直居中对齐 */
  gap: 10px; /* 直接设置按钮和链接之间的间距，数值可以自己调 */
}

.btn-signin {
  width: auto; /* 让按钮宽度自适应内容，避免占满整行 */
  /* 如果想让按钮占满剩余空间，只需要加这一行：flex: 1; */
}

.forgot-link {
  padding: 8px 12px; /* 给链接加内边距，避免太挤 */
  color: #007bff;
  text-decoration: none;
}

.forgot-link:hover {
  text-decoration: underline; /* 鼠标悬停时显示下划线，提升交互性 */
}

方法二：Inline-block布局（兼容性更强） #

如果你需要兼容一些旧浏览器，可以用这种方法，不过要处理几个小细节：

修改后的HTML #

和Flex布局的HTML结构一样，去掉按钮的btn-block类：

<div class="auth-actions">
  <button class="btn btn-lg btn-primary btn-signin" type="submit" name="submit">Sign in</button>
  <a href="register4.php" id="underlining" class="forgot-link"> Forgot Password? </a>
</div>

对应的CSS样式 #

.auth-actions {
  font-size: 0; /* 清除inline-block元素之间的默认空格间隙 */
}

.btn-signin {
  display: inline-block;
  width: auto;
  margin-right: 10px; /* 设置按钮和链接的间距 */
  font-size: 1rem; /* 恢复按钮的字体大小，因为父容器设了font-size:0 */
  vertical-align: middle; /* 让按钮和链接垂直对齐 */
}

.forgot-link {
  display: inline-block;
  padding: 8px 12px;
  color: #007bff;
  text-decoration: none;
  font-size: 1rem; /* 恢复链接的字体大小 */
  vertical-align: middle; /* 和按钮保持垂直居中 */
}

.forgot-link:hover {
  text-decoration: underline;
}

补充说明 #

两种方法都能实现你要的效果，优先推荐Flex布局，因为它不用处理inline-block的字体大小、默认空格这些小坑，代码更直观。如果你想让按钮占页面的大部分宽度，只需要在Flex布局的.btn-signin类里加flex: 1;，按钮就会自动填充剩余空间，链接只占自身内容的宽度。

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