非常抱歉,您是对的。在 HTML 中,id 必须是唯一的,不能重复使用。
为了让这两个按钮居中而其他元素不动,您可以使用以下 CSS 样式:
css复制代码
.layui-col-md6 {
text-align: center;
}
.centered-button-container {
display: flex;
justify-content: center;
}
.centered-button-container button {
margin: 10px;
}
在 HTML 中,将按钮包装在一个具有特定类名(例如 centered-button-container)的容器 <div> 中:
html复制代码
<div class="layui-row layui-col-space5">
<div class="layui-col-md6" style="text-align: center;">
<div id="qrbDiv" style="height: 200px;width: 100%"></div>
<div style="margin-top: 5px" class="layui-progress layui-progress-big" lay-showPercent="true" lay-filter="jdt-filter">
<label style="margin-left: 45%">确认表导出进度</label>
<div class="layui-progress-bar" lay-percent="0%"></div>
</div>
<div class="centered-button-container">
<button type="button" data-fn="genQrb" class="layui-btn">生成确认表</button>
<button type="button" data-fn="genSyQrb" class="layui-btn">生成剩余确认表</button>
</div>
</div>
</div>
在上述代码中,我们将按钮放置在一个具有类名 centered-button-container 的 <div> 容器中。然后,通过设置该容器的 display: flex; justify-content: center; 样式,将按钮在水平方向上居中对齐。
请注意,在这种情况下,您不需要为按钮设置任何特定的 id。只需使用容器的类名来选择并样式化按钮即可。
希望这可以满足您的需求。如果您有任何其他问题,请随时提问。