Electron JS：如何修改元素（按钮、标签等）的定位

首先明确：Electron里的界面元素（按钮、输入框、标签）定位完全依靠HTML和CSS，和普通网页的布局逻辑一致，不需要用Electron的API设置x/y坐标。你遇到的新元素跑到下方的问题，是因为当前CSS设置让元素独占一行导致的。

现有代码的核心问题 #

1. ID重复：所有输入框的id都是userInput，所有按钮的id都是submit，HTML要求id必须唯一，否则会导致JS操作失效、布局异常。
2. 布局方式错误：CSS里设置了label, input { display: block; }，这会让标签和输入框各自独占一行，新元素只能向下排列。

修改方案（用Flexbox实现横向排列） #

以下是调整后的完整代码：

修改后的index.html

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Input Desktop App</title>
   <link rel="stylesheet" href="styles.css">
</head>
<body>
   <div class="container">
       <h1>Nutritions</h1>
       <!-- 每组元素包裹在row容器里，实现横向排列 -->
       <div class="input-row">
           <label for="carbsInput">Carbohydrate:</label>
           <input type="text" id="carbsInput">
           <button id="carbsSubmit">Submit</button>
       </div>
       <div class="input-row">
           <label for="proteinInput">Protein:</label>
           <input type="text" id="proteinInput">
           <button id="proteinSubmit">Submit</button>
       </div>
       <div class="input-row">
           <label for="fatInput">Fat:</label>
           <input type="text" id="fatInput">
           <button id="fatSubmit">Submit</button>
       </div>
   </div>
   <script src="renderer.js"></script>
</body>
</html>

修改后的style.css

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

.container {
    max-width: 800px;
    margin: 20px auto;
    padding: 30px;
    background: white;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

/* 用Flexbox让行内元素横向排列，并且对齐 */
.input-row {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    gap: 10px; /* 元素之间的间距 */
}

/* 固定标签宽度，让布局更整齐 */
label {
    width: 120px;
}

input {
    padding: 6px;
    flex: 1; /* 输入框占剩余空间 */
}

button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 7px 20px;
    cursor: pointer;
}

如果要手动设置x/y坐标（绝对定位） #

如果需要精准控制元素的x/y位置，可以用CSS的position: absolute，示例：

#carbsInput {
    position: absolute;
    left: 150px; /* x坐标 */
    top: 80px; /* y坐标 */
}

注意：绝对定位的元素会相对于最近设置了position: relative的父元素定位，所以需要给.container加上position: relative;，否则会相对于整个窗口定位。

补充说明 #

• Electron主进程代码（main.js）无需修改，界面布局由渲染进程（HTML/CSS/JS）负责。
• 后续处理按钮点击事件时，renderer.js需要针对每个唯一的按钮id绑定事件，示例：

document.getElementById('carbsSubmit').addEventListener('click', () => {
    const input = document.getElementById('carbsInput').value;
    window.ipcRenderer.send('userInput', { type: 'carbs', value: input });
});

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