Как получить текст слева от поля ввода - PullRequest
Новая
       133

Как получить текст слева от поля ввода

1 голос
/ 21 июня 2020

Это может быть очень простой вопрос, но почему-то я не могу его решить самостоятельно.

У меня есть контактная форма, и я хочу отобразить заголовок поля ввода справа и ввод слева:

Имя: [ввод]

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, но он все еще отображается в двух строках.

Может быть, что я контролирую какое-то объявление о показе или что-то в этом роде.

Ответы [ 3 ]

0 голосов
/ 21 июня 2020

Я предлагаю вам добавить родительский элемент 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% вашего ввода может быть полезно в других контекстах вашего проекта, поэтому вы можете оставить его.

0 голосов
/ 21 июня 2020

Попробуйте добавить div с display: flex и max-width: 100% вокруг ввода и метки и установите 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>
0 голосов
/ 21 июня 2020

Да, глупая ошибка в том, что вы указали - 

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

здесь 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>
...