如何修改HTML表单代码使斜杠符号显示在两个数字输入框中间

解决方案 #

方案1：使用Flex布局（更推荐，无浮动副作用） #

你当前代码的问题是仅给input元素设置了左浮动，夹在两个输入框中间的/符号属于普通行内元素，没有设置浮动所以被挤到了输入框后方。改用Flex布局可以轻松实现元素横向排列、自动对齐，代码修改如下：

<html>
<head>
<style>
/* 替换原有浮动样式为flex布局 */
.your-class {
  display: flex;
  align-items: center; /* 所有子元素垂直居中对齐 */
  gap: 8px; /* 子元素之间统一设置8px间距，可根据需求调整大小 */
  margin-bottom: 16px; /* 替代原有br标签的底部间距 */
}
</style>
</head>
<body>
<form action="" method="post">
<div class="your-class">
<label><b>aspect ratio:</b></label>
<input type="number" name="no1"  min="0.25" style="width: 4em" step="any" placeholder="value1" required>
<b>/</b>
<input type="number" name="no2" min="0.25" style="width: 4em" step="any" placeholder="value2" required>
</div>
<label><b>value3:</b></label>
<input type="number" name="no3" min="0.25" step="any" placeholder="value3" required><br><br>
<input type="hidden" name="calculator_ok" value="ok">
<input type="submit" name="submit" value="add" style="background-color: BurlyWood"><br>
</form>
</body>
</html>

方案2：保留浮动逻辑，仅调整样式 #

如果你不想改动原有浮动的实现思路，只需要给中间的/符号也加上左浮动，同时设置左右边距调整间距即可：

<style>
/* 给/符号也加上浮动 */
.your-class input, .your-class b{
  float:left;
}
/* 给/符号设置左右间距 */
.your-class b {
  margin: 0 8px;
}
</style>

两种方案都可以实现/符号显示在两个输入框中间的效果，Flex布局不需要额外处理浮动带来的父元素高度塌陷问题，更推荐使用。

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