嘿，我看到你在第一个Laravel项目里卡在了表单字段对齐上，想要把三个输入框放在同一行对吧？咱们先捋捋你现有代码里的几个小问题，然后给你两个靠谱的解决方案~

先说说你代码里的问题点 #

1. 重复的style属性：第一个<div>写了两个style标签，HTML里单个元素只能有一个style属性，后面的会直接覆盖前面的，所以你加的float:left其实根本没生效。
2. 浮动不统一：只有第一个div尝试加了浮动，后面两个没加，自然会换行显示；第三个div还加了margin-left:400px，导致位置更偏。
3. 重复的id值：三个输入框的id都是recipient-name，这违反了HTML规范（id必须唯一），会导致标签关联、JS选择元素等功能出问题。
4. 冗余的内联样式：你用了Bootstrap的form-control、col-form-label这些类，其实完全可以用Bootstrap原生的栅格系统来布局，比自己写一堆内联样式省心多了。

方案一：用Bootstrap栅格系统（推荐） #

既然你已经在使用Bootstrap的表单类，那直接用它的栅格布局是最适配、最省心的方式，还自带响应式效果（小屏幕自动堆叠，大屏幕并排）：

<div class="row">
    <!-- 第一个输入组：占4列 -->
    <div class="mb-3 col-md-4">
        <label for="admin-time" class="col-form-label">Admin time (Hours):</label>
        <input type="number" style="width: 7em" name="admin_time" class="form-control" id="admin-time" min="1" step="1" required>
    </div>
    <!-- 第二个输入组：占4列 -->
    <div class="mb-3 col-md-4">
        <label for="work-time" class="col-form-label">Work time (Hours):</label>
        <input type="number" style="width: 7em" name="work_time" class="form-control" id="work-time" min="1" step="1" required>
    </div>
    <!-- 第三个输入组：占4列 -->
    <div class="mb-3 col-md-4">
        <label for="rest-time" class="col-form-label">Rest time (Hours):</label>
        <input type="number" style="width: 7em" name="rest_time" class="form-control" id="rest-time" min="1" step="1" required>
    </div>
</div>

说明：

• row是Bootstrap的行容器，里面的列会自动排列；
• col-md-4表示在中等屏幕（≥768px）及以上，每个输入组占12列栅格中的4列，三个刚好填满一行；
• 修正了所有id为唯一值，让label和input正确关联；
• 去掉了冗余的内边距样式，布局完全交给Bootstrap处理，代码更整洁。

方案二：修正内联样式（如果你不想用栅格） #

如果你想继续用内联样式调整，那就得统一浮动、合并style属性，同时修正id问题：

<!-- 三个div都加上float:left，合并style属性 -->
<div style="float: left; margin-left: 20px;">
    <label for="admin-time" class="col-form-label">Admin time (Hours):</label>
    <input type="number" style="width: 7em" name="admin_time" class="form-control" id="admin-time" min="1" step="1" required>
</div>
<div style="float: left; margin-left: 20px;" class="mb-3">
    <label for="work-time" class="col-form-label">Work time (Hours):</label>
    <input type="number" style="width: 7em" name="work_time" class="form-control" id="work-time" min="1" step="1" required>
</div>
<div style="float: left; margin-left: 20px;" class="mb-3">
    <label for="rest-time" class="col-form-label">Rest time (Hours):</label>
    <input type="number" style="width: 7em" name="rest_time" class="form-control" id="rest-time" min="1" step="1" required>
</div>
<!-- 一定要加这个清除浮动的div，避免影响后面的页面布局 -->
<div style="clear: both;"></div>

说明：

• 每个div都加上float:left，确保它们在同一行排列；
• 把原来过大的margin-left调整为合适的20px（避免超出屏幕）；
• 合并了每个元素的style属性，符合HTML规范；
• 同样修正了id为唯一值；
• 最后加的clear:bothdiv用来清除浮动，防止后面的页面元素被浮动影响。

最后小提醒 #

优先推荐方案一，因为Bootstrap的栅格系统不仅能解决对齐问题，还能自动适配不同尺寸的屏幕，维护起来也更方便。另外，记得以后写HTML时，id一定要唯一，这是基础规范哦~

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