时间戳

首页 > 解决方案 > 我希望斜线在两个小盒子之间

html - 我希望斜线在两个小盒子之间

问题描述

我使用 HTML 制作了一个表单，代码如下：

<html>
<head>
<style>
.your-class input{
  float:left;
}
</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><br><br>
</div>
<label><b>value3:</b></label>
<input type="number" name="no3" min="0.25" step="any" placeholder="value3" required><br>
<input type="hidden" name="calculator_ok" value="ok">
<input type="submit" name="submit" value="add" style="background-color: BurlyWood"><br>
</form>
</body>
</html>

我希望符号 ( /) 在两个小盒子之间而不是在它们之后，见图：
表格样本

我应该如何编辑代码以获得该结果？

标签： htmlcssforms

解决方案

问题的发生是因为“float:right”CSS 规则；它一直<inputs>向左浮动，而其他一切都保持不变。

使其工作的几个选项：

  • 浮动可以被移除；
  • 斜线可以放置在容器内，并且 CSS 规则也可以调整以应用于该容器。

推荐阅读