我怎么能改变一个按钮在窗口中的位置？我想在现有输入框的旁边创建新的输入框，但当我创建一个输入框时，它总是将新框设置在最后创建的输入框下。有没有办法给予一个按钮，输入，标签的x和y坐标？在文档中找不到任何东西，我也是JavaScript和Electron的新手。
下面是我的代码：
main.js:
const { app, BrowserWindow, ipcMain } = require('electron');
const path = require('path');
let mainWindow;
function createWindow() {
mainWindow = new BrowserWindow({
width: 1000,
height: 1000,
x: 10,
y: 10,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
});
mainWindow.loadFile('index.html');
mainWindow.on('closed', () => {
mainWindow = null;
});
}
app.whenReady().then(() => {
createWindow();
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
});
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
ipcMain.on('userInput', (event, userInput) => {
// Handle the user input here
console.log('User input:', userInput);
// You can perform actions with the user input as needed
});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>
<label for="userInput">Carbohydrate:</label>
<input type="text" id="userInput">
<button id="submit">Submit</button>
<label for="userInput">Protein:</label>
<input type="text" id="userInput">
<button id="submit">Submit</button>
<label for="userInput">Fat:</label>
<input type="text" id="userInput">
<button id="submit">Submit</button>
</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: 600px;
margin: 20px auto;
padding: 30px;
background: white;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
label, input {
display: block;
margin-bottom: 10px;
}
button {
background-color: #007bff;
color: white;
border: none;
padding: 7px 20px;
cursor: pointer;
}Thx提前
1条答案
按热度按时间toiithl61#
您应该了解Flexbox：https://css-tricks.com/snippets/css/a-guide-to-flexbox/
将你的.html文件修改成这样：
在你的.css文件中，你可以这样做：