如何在输入字段的左侧获取文本

Question

这可能是一个非常简单的问题，但不知怎的，我自己解决不了。

我有一个联系表单，我想在右侧显示输入字段的标题，在左侧显示输入，例如：

名称：[输入]

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/

我尝试将标签和输入字段放在一个 div 中，但它仍然显示为两行。

可能是，我正在监督一些展示声明之类的。

Answer 1

是的，愚蠢的错误是您指定了-

input[type="text"],
select {
  width: 100%;
}

here width: 100% 防止它们出现在同一行，因为输入只占据屏幕的 100%...顺便说一下，我目前省略了它，但您可以根据您的再次指定它需要 80% 或 60% 随意。

.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>

Answer 2

尝试在输入和标签周围添加一个带有display: flex 和max-width: 100% 的div，并将输入处的flex-grow 设置为1

.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>

Answer 3

我建议您为每个标签和输入组合添加一个父 HTML 元素，以便您可以使用 flex 排列它们：

.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>

宽度：您输入的 100% 可能在您项目的其他上下文中很有用，因此您可能希望保留它。