如何在HTML5中实现A/B、C/D样式的分数式输入框布局？

嘿，我来帮你把输入框改成你想要的分数排版！核心思路是用CSS垂直布局模拟分数结构，每个分数用容器包裹分子（A/C输入框）和分母（B/D输入框），加上分数线后把两个分数容器并排，中间放加号就行。

下面是修改后的完整代码，直接替换你原来的Section_1部分就能用，还保留了所有原有功能：

<div id="Section_1"> 
    <p style='font-size: 16px;'>Please tell me what you are adding? **Placement Matters** Now we are going to input A / B + C / D</p> 
    <div style="display: flex; align-items: center; gap: 10px; font-size: 18px;">
        <!-- 第一个分数：A/B -->
        <div class="fraction">
            <input type="number" id="AbsoluteA" size='4' style="border: none; text-align: center;">
            <span class="fraction-line"></span>
            <input type="number" id="AbsoluteB" size='4' style="border: none; text-align: center;">
        </div>
        <span>+</span>
        <!-- 第二个分数：C/D -->
        <div class="fraction">
            <input type="number" id="AbsoluteC" size='4' style="border: none; text-align: center;">
            <span class="fraction-line"></span>
            <input type="number" id="AbsoluteD" size='4' style="border: none; text-align: center;">
        </div>
    </div>
    <p id="FAILEDHERE"></p> 
    <button onclick="Script1()" id="button2">Proceed</button> 
</div>

<style>
/* 分数容器：垂直居中排列 */
.fraction {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 分数线样式 */
.fraction-line {
    width: 40px;
    height: 1px;
    background-color: #000;
    margin: 2px 0;
}

/* 可选：输入框聚焦时的样式，提升交互感 */
.fraction input:focus {
    outline: 1px solid #2196F3;
    border-radius: 2px;
}
</style>

关键细节说明： #

• 外层用display: flex把两个分数和加号横向对齐，gap:10px控制元素间距，避免挤在一起。
• .fraction容器用垂直flex布局，让分子输入框在上、分母在下，完美模拟分数结构。
• 分数线用小型span元素实现，你可以调整width改变线长、height改变线粗。
• 去掉了输入框默认边框，让整体更贴近手写分数的视觉效果；聚焦时的边框样式是可选优化，提升用户体验。
• 调整了字体大小（把原代码里的font-size:4改成16px，避免文字过小看不清），你可以根据需求自行修改数值。

这样修改后，输入区域就会呈现出A/B + C/D的分数形式，完全符合你的需求，而且原有功能不受影响~

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