Umieszczenie <select> w formularzu w jednej lini

Question

Chcę zrobić formularz, gdzie po lewej stronie będą etykiety dla list wyboru <select> a po prawej listy wyboru <select>.

Ważne aby te listy wyboru <select> zaczynały się w jednym miejscu w pionie aby wyglądało w miarę przyzwoicie.

Czy ma ktoś pomysł jak to zrobić? Wizualizacja:

Answer 1

    <div id="select-form">
      <form>
        <label for="kategoria">Wybierz kategorię zakupową:</label>
        <select id="kategoria" name="kategoria">
          <option value="opcja1">Opcja 1</option>
          <option value="opcja2">Opcja 2</option>
          <option value="opcja3">Opcja 3</option>
        </select>
        <br />
        <br />
        <label for="plan">Plan zakupowy na rok:</label>
        <select id="plan" name="plan">
          <option value="opcja1">Opcja 1</option>
          <option value="opcja2">Opcja 2</option>
          <option value="opcja3">Opcja 3</option>
        </select>
        <br />
        <br />
        <label for="spolka">Spółka:</label>
        <select id="spolka" name="spolka">
          <option value="opcja1">Opcja 1</option>
          <option value="opcja2">Opcja 2</option>
          <option value="opcja3">Opcja 3</option>
        </select>
        <hr />
        <input id="submit-button" type="submit" value="Wyślij" />
      </form>
    </div>

* {
  margin: 0;
  padding: 0;
  text-transform: uppercase;
}
#select-form {
  max-width: 650px;
  margin: auto;
  background: #dedede;
  color: #1e1e1e;
  padding: 7%;
  border-radius: 10px;
}
label {
  display: inline-block;
  width: 49.5%;
  text-align: left;
}
select {
  display: inline-block;
  width: 49.5%;
}
hr {
  margin: 25px 0;
  height: 2px;
  border: none;
  background: #1e1e1e;
}
#submit-button {
  float: right;
  width: 49.5%;
  padding: 10px 25px;
  border-radius: 5px;
  border: none;
  background: #1e1e1e;
  color: #fff;
  transition: all 0.2s ease-in-out;
}
#submit-button:hover {
  opacity: 0.9;
  cursor: pointer;
  letter-spacing: 5px;
}

Wierzę, że poradzisz sobie z wystylizowaniem formularza po swojemu.

Comments

ciekawe a za razem proste! Dziękuję! :)

Answer 2

Oprócz rozwiązania Visual Studio Kot  rozważ także zamknięcie etykiet i selektów w blokach odpowiednio położonych na stronie.

Comments

Dzięki, właśnie też mi to przyszło do głowy :)

Answer 3

IMHO w obecnym czasie odradzam, tworzenie layout-u strony w oparciu o <br>, display: inline-block i float bo będzie "problem" z responsywnością, proponuję np. grid (bardzo prosty przykład)

[ on-line ]

<form>
  <div class="form-container">
    <div>
      <label for="kategoria">Wybierz kategorię zakupową:</label>
    </div>
    <div>
      <select id="kategoria" name="kategoria">
        <option value="opcja1">Opcja 1</option>
        <option value="opcja2">Opcja 2</option>
        <option value="opcja3">Opcja 3</option>
      </select>
    </div>

    <div>
      <label for="plan">Plan zakupowy na rok:</label>
    </div>
    <div>
      <select id="plan" name="plan">
        <option value="opcja1">Opcja 1</option>
        <option value="opcja2">Opcja 2</option>
        <option value="opcja3">Opcja 3</option>
      </select>
    </div>

    <div>
      <label for="spolka">Spółka:</label>
    </div>
    <div>
      <select id="spolka" name="spolka">
        <option value="opcja1">Opcja 1</option>
        <option value="opcja2">Opcja 2</option>
        <option value="opcja3">Opcja 3</option>
      </select>
    </div>
    <div class="buttons">
      <button id="submit" type="submit">Wyślij</button>
    </div>
  </div>  
</form>

.form-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: 
    ". ."
    ". ."
    ". ."
    "buttons buttons";
  gap: .5rem 0;
  
  max-width: 600px;
  margin: 1rem auto;
  padding: 1rem;
  color: #1e1e1e; 
  background-color: #dedede;
  border-radius: 1rem;
}
select {
  width: 100%;
}
.buttons {
  grid-area: buttons;
  margin-top: 1rem;
}
button#submit {  
  width: 50%;
  padding: 10px 0;
  margin-left: 50%;
  border-radius: 5px;
  border: none;
  background-color: #1e1e1e;
  color: white;
}

 

Comments

dziękuję