这可能是一个很简单的问题，但不知何故，我自己解决不了。
我有一个联系人表单，我想在右侧显示inputfield的标题，在左侧显示输入，如下所示:
名称:[输入]
HTML:
<main>
<div class="contact_form">
<div class="container">
<form action="/php/action_page.php" method="POST">
<label for="name" style="display: inline-block; text-align: left;">Vorname:</label>
<input
type="text"
id="name"
name="name"
>
<input
type="email"
id="email"
name="email"
placeholder="Deine E-Mail-Adresse... "
/>
<textarea
id="subject"
name="subject"
placeholder="Deine Nachricht..."
style="height: 200px;"
></textarea>
<input type="submit" value="Submit" />
</form>
</div>
</div>
</main>
CSS:
.contact_form {
grid-row: 2;
grid-column: 1/4;
justify-content: center;
align-items: center;
}
input[type="text"],
select {
width: 100%;
padding: 12px;
border: none;
border-bottom: solid black 2px;
box-shadow: none;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
color: black;
background-color: white;
}
textarea{
width: 100%;
padding: 12px;
border: solid black 2px;
box-shadow: none;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
background-color: white;
}
input[type="email"] {
width: 100%;
padding: 12px;
border: none;
border-bottom: 2px solid black;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
color: black;
background-color: white;
}
input[type="submit"] {
background-color: black;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
input[type="submit"]:hover {
background-color: #383838;
}
.container {
border-radius: 5px;
background-color: transparent;
padding: 20px;
}
.container p {
color: white;
font-family: PTS;
font-size: 25px;
}
您可以在以下网址找到联系表格:http://charlyscarface.com/problem/
我尝试将lable和inputfield放在一个div中，但它仍然显示在两行中。
可能是，我在监督一些显示声明什么的。
是的，愚蠢的错误是你指定了-
input[type="text"],
select {
width: 100%;
}
这里的宽度:100%是防止他们都来在同一行，因为输入只是采取100%的屏幕。。。 顺便说一下，我现在已经省略了，但你可以再次指定它根据你的需要，像80%或60%，就像你喜欢的。
null
.contact_form {
grid-row: 2;
grid-column: 1/4;
justify-content: center;
align-items: center;
}
input[type="text"],
select {
padding: 12px;
border: none;
border-bottom: solid black 2px;
box-shadow: none;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
color: black;
background-color: white;
}
textarea{
width: 100%;
padding: 12px;
border: solid black 2px;
box-shadow: none;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
background-color: white;
}
input[type="email"] {
width: 100%;
padding: 12px;
border: none;
border-bottom: 2px solid black;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
color: black;
background-color: white;
}
input[type="submit"] {
background-color: black;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
input[type="submit"]:hover {
background-color: #383838;
}
.container {
border-radius: 5px;
background-color: transparent;
padding: 20px;
}
.container p {
color: white;
font-family: PTS;
font-size: 25px;
}<main>
<div class="contact_form">
<div class="container">
<form action="/php/action_page.php" method="POST">
<label for="name" style="text-align: left;">Vorname:</label>
<input
type="text"
id="name"
name="name"
/>
<input
type="email"
id="email"
name="email"
placeholder="Deine E-Mail-Adresse... "
/>
<textarea
id="subject"
name="subject"
placeholder="Deine Nachricht..."
style="height: 200px;"
></textarea>
<input type="submit" value="Submit" />
</form>
</div>
</div>
</main>
尝试在输入和标签周围添加具有display:flex和max-width:100%的div，并将输入处的flex-grow设置为1
null
.contact_form {
grid-row: 2;
grid-column: 1/4;
justify-content: center;
align-items: center;
}
.name-container{
display: flex;
max-width: 100vw;
align-items: center;
}
label{margin-right: .3rem}
input[type="text"],
select {
flex: 1 0 auto;
padding: 12px;
border: none;
border-bottom: solid black 2px;
box-shadow: none;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
color: black;
background-color: white;
}
textarea{
width: 100%;
padding: 12px;
border: solid black 2px;
box-shadow: none;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
background-color: white;
}
input[type="email"] {
width: 100%;
padding: 12px;
border: none;
border-bottom: 2px solid black;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
color: black;
background-color: white;
}
input[type="submit"] {
background-color: black;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
input[type="submit"]:hover {
background-color: #383838;
}
.container {
border-radius: 5px;
background-color: transparent;
padding: 20px;
}
.container p {
color: white;
font-family: PTS;
font-size: 25px;
}<main>
<div class="contact_form">
<div class="container">
<form action="/php/action_page.php" method="POST">
<div class="name-container">
<label for="name" style="display: inline-block; text-align: left;">Vorname:</label>
<input
type="text"
id="name"
name="name"
>
</div>
<input
type="email"
id="email"
name="email"
placeholder="Deine E-Mail-Adresse... "
/>
<textarea
id="subject"
name="subject"
placeholder="Deine Nachricht..."
style="height: 200px;"
></textarea>
<input type="submit" value="Submit" />
</form>
</div>
</div>
</main>
我建议您为每个标签和输入组合添加一个父HTML元素，这样您可以用flex来安排它们:
null
.form-line {
display: flex;
align-items: center; /* optionnal */
gap: 12px; /* optionnal */
}
input[type="text"],
select {
width: 100%;
} <p class="form-line">
<label for="your-input">label</label>
<input type="text" id="your-input">
</p>