for (const item of jsonRes) { if (item.code === 'customerInfo') {} //客户信息展示 if (item.code === 'loan') { // 合同展示 const buttonContainer = document.createElement('div'); buttonContainer.innerHTM...-Go服务器开发

要修改按钮的布局，您可以通过调整 CSS 来实现。以下是一些常见的布局方式，以及如何在您的代码中应用这些样式。

1. 使用 Flexbox

如果您希望按钮在一行内水平排列，并且可以自定义对齐方式，可以使用 flex 布局。

const buttonContainer = document.createElement('div');
buttonContainer.classList.add('button-container'); // 给容器添加类名
// 添加 Flexbox 样式
buttonContainer.style.display = 'flex';
buttonContainer.style.justifyContent = 'space-around'; // 按钮均匀分布
buttonContainer.style.alignItems = 'center'; // 垂直居中（可选）

2. 使用 Grid 布局

如果您想要更复杂的布局，使用 CSS Grid 可以实现更加灵活的设计。

const buttonContainer = document.createElement('div');
buttonContainer.classList.add('button-container');
// 添加 Grid 样式
buttonContainer.style.display = 'grid';
buttonContainer.style.gridTemplateColumns = 'repeat(4, 1fr)'; // 将按钮分成四列
buttonContainer.style.gap = '10px'; // 设置按钮之间的间距

3. 添加 CSS 样式以美化按钮

除了修改布局，还可以为按钮添加额外的样式，以提高用户体验。例如：

.button-container {
    margin: 20px; /* 给容器添加外边距 */
}
.btn {
    background-color: #007bff; /* 按钮背景颜色 */
    color: white; /* 按钮文字颜色 */
    border: none; /* 去掉默认边框 */
    padding: 10px 15px; /* 内边距 */
    border-radius: 5px; /* 圆角效果 */
    cursor: pointer; /* 鼠标悬停时变为指针 */
}
.btn:hover {
    background-color: #0056b3; /* 悬停时改变背景颜色 */
}

更新后的代码示例

结合以上建议，下面是更新后的 JavaScript 和 CSS 示例代码：

JavaScript 部分：

for (const item of jsonRes) {
    if (item.code === 'customerInfo') { 
        // 客户信息展示逻辑 
    } 
   
    if (item.code === 'loan') { // 合同展示
        const buttonContainer = document.createElement('div');
        buttonContainer.classList.add('button-container'); // 添加类名
        
        // 使用 Flexbox 或 Grid 布局（选择一种）
        buttonContainer.style.display = 'flex'; // 或者使用 grid；
        buttonContainer.style.justifyContent = 'space-around'; 
        buttonContainer.style.alignItems = 'center';
        buttonContainer.innerHTML = `
            <button class="btn" data-action="action1">按钮1</button>
            <button class="btn" data-action="action2">按钮2</button>
            <button class="btn" data-action="action3">按钮3</button>
            <button class="btn" data-action="action4">按钮4</button>
        `;
        
        document.body.appendChild(buttonContainer);
        buttonContainer.querySelectorAll('.btn').forEach(button => {
            button.addEventListener('click', function() {
                const action = this.getAttribute('data-action');
                switch (action) {
                    case 'action1':
                        console.log('按钮1被点击');
                        break;
                    case 'action2':
                        console.log('按钮2被点击');
                        break;
                    case 'action3':
                        console.log('按钮3被点击');
                        break;
                    case 'action4':
                        console.log('按钮4被点击');
                        break;
                    default:
                        break;
                }
            });
        });
    }
}

CSS 部分：

.button-container {
    display: flex; /* 或者改为 grid，具体根据需要来选择 */
    justify-content: space-around;
    align-items: center;
    margin: 20px; /* 可选：给容器添加外边距 */
}
.btn {
    background-color: #007bff; 
    color: white; 
    border: none; 
    padding: 10px 15px; 
    border-radius: 5px;
    cursor: pointer;
}
.btn:hover {
    background-color: #0056b3;
}