嘿，所以我正在尝试构建一个使用数据库(我正在使用 PouchDB)的电影评论网站，我想设置我的管理员/添加评论页面的样式，以便输入和标签全部对齐某种方式。我一直在调整宽度、填充和边距，但我似乎无法让它们对齐。有人可以教我如何按照我希望的方式排列它们吗？
这是我希望他们看起来的样子:
body {
margin: 0;
font-family: georgia, arial;
background-color: #e0e0e0;
text-align: center;
}
.newFilm {
text-align: left;
display: inline-block;
background-color: green;
width: 80%;
padding: 20px;
}
label {
padding: 6px;
text-align: center;
background: red;
}
.form {
display: flex;
text-align: center;
flex-direction: column;
}
input {
margin: 10px;
width: 40%;
background-color: yellow;
padding: 8px;
border: 2px;
}<div class="newFilm">
<h2 id='formTitle'>Create new review</h2>
<div class="form">
<form>
<label for="title">Title:</label><input type="text" id="title">
<label for="genre">Genre:</label><input type="text" id="genre">
<label for="image">Image:</label><input type="text" id="image">
<label for="rating">Rating:</label><input type="number" id="rating">
<label for="synopsis">Synopsis:</label><input type="text" id="synopsis">
<label for="trailer">Trailer:</label><input type="text" id="trailer">
<input type="hidden" id="id">
<button id="modifyFilmButton">Post review!</button>
</form>
</div>
</div>最佳答案
您可以使用 flex 或 grid 或两者。我将两者都用作示例。您也可以仅使用网格并在网格中嵌套网格。
body {
margin: 0;
font-family: georgia, arial;
background-color: #e0e0e0;
text-align: center;
}
.newFilm {
background-color: green;
max-width: 100%;
padding: 10%;
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 30px;
}
#formTitle {
grid-column: 1/3;
}
#modifyFilmButton {
grid-column: 2/3;
width: 50%;
justify-self: end;
}
.left {
display: flex;
justify-content: center;
flex-direction: column;
text-align: left;
}
.right {
display: flex;
flex-direction: column;
text-align: left;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>temp</title>
<link rel="stylesheet" type="text/css" href="temp.css" />
</head>
<body>
<div class="newFilm">
<h2 id="formTitle">Create new review</h2>
<div class="left">
<label for="title">Title:</label><input type="text" id="title" />
<label for="image">Image:</label><input type="text" id="image" />
<label for="trailer">Trailer:</label><input type="text" id="trailer" /> <input type="hidden" id="id" />
<label for="rating">Rating:</label><input type="number" id="rating" />
</div>
<div class="right">
<label for="genre">Genre:</label><input type="text" id="genre" />
<label for="synopsis">Synopsis:</label><input type="text" id="synopsis" />
</div>
<button id="modifyFilmButton">Post review!</button>
</div>
<script src="temp.js"></script>
</body>
</html>关于html - 如何对齐我的表格，使它们看起来像这样？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54058755/