如果您想要在一行中展示三个输入框,您可以使用 CSS Flexbox 或 Grid 布局来实现。以下是一个示例代码,演示如何将输入框排列成三列:
HTML 和 JavaScript 示例
<div class="modal-body">
<!-- 动态内容将插入这里 -->
</div>
$.ajax({
url: `../d/exemptionReduction/selectInforList?loanCodes=${loanCodes}`,
contentType: 'application/json',
type: 'POST',
lang: defLanguage,
async: false,
success: function(res) {
var dialogData = JSON.parse(res);
if (dialogData.success) {
const modalBody = document.querySelector('.modal-body');
for (let i = 0; i < dialogData.data.length; i++) {
// 创建并添加一行(容器)
const row = document.createElement('div');
row.classList.add('input-row'); // 添加类以应用样式
// 创建输入框
createInputElement(row, '客户名称', dialogData.data[i].name);
createInputElement(row, '客户代码', dialogData.data[i].customerId);
createInputElement(row, '身份识别', dialogData.data[i].ident);
// 将整行添加到 modalBody 中
modalBody.appendChild(row);
}
} else {
console.error('Failed to fetch data:', dialogData.message);
}
},
});
// 创建输入框函数
function createInputElement(container, labelText, value) {
const inputWrapper = document.createElement('div');
inputWrapper.classList.add('input-wrapper'); // 包装每个输入的 div
const label = document.createElement('label');
label.textContent = labelText;
const input = document.createElement('input');
input.type = "text";
input.value = value;
inputWrapper.appendChild(label);
inputWrapper.appendChild(input);
container.appendChild(inputWrapper); // 将包装后的 div 添加到容器中
}
CSS 示例
接下来,我们需要一些 CSS 来定义布局,使每行显示三个输入项:
.modal-body {
display: flex;
flex-direction: column; /* 每个新的 row 都是一个新行 */
}
.input-row {
display: flex;
justify-content: space-between; /* 在一行中均匀分配空间 */
}
.input-wrapper {
flex: 1; /* 每个输入项平分空间 */
margin-right: 10px; /* 输入之间的间距 */
}
.input-wrapper:last-child { /* 最后一个元素不需要右边距 */
margin-right: 0;
}
关键点:
- Flexbox:通过设置
.input-row
为display: flex;
来让它内部的内容在同一行内排列。 - 均匀分布:使用
justify-content: space-between;
来确保子元素之间有相等的间隔。 - 响应式布局:使用
flex
属性使得每个.input-wrapper
在可用空间中平分。
这样,您就能够在同一行上显示多个输入框了,同时保持良好的视觉效果和易于操作性。
内容由零声教学AI助手提供,问题来源于学员提问