CSS свойства float + align дают неожиданные результаты

Question

Почему раскрывающееся меню «Любимый стартовый тип» выглядит так? Я хочу, чтобы это было похоже на то, как выглядит электронная почта и поколение любимых покемонов. Что именно делает этот плавающий элемент с выравниванием по правому краю?

.form {
  margin: 0 auto;
  width: 300px;
}

.form input {
  display: inline-block;
  text-align: left;
  float: right;
}

.form label {
  display: inline-block;
  text-align: right;
  float: left;
}

body {
  background-color: grey;
  color: white;
}

<center>
  <h1 id="title">Pokemon survey</h1>
  <p id="description">Everyone likes Pokemon right?</p>
</center>

<div class="form" id="survey-form">
  <label for="name">Name: </label>
  <input type "text" id="name-label" name="Name" placeholder="Enter your name"><br><br>
  <label for="email">Email: </label>
  <input type="email" id="email-label" name="email" placeholder="Enter your Email"><br><br><br>
  <label for "favorite-generation">Favorite Pokemon generation: </label>
  <input type="number" id="number" min="1" max="8"><br><br>
  <label for="favorite-type" id="dropdown" name="favorite-type">Favorite starter type:<label>
      <select id="dropdown" name="favorite-type">
        <option value="fire">Fire</option>
        <option value="water">Water</option>
        <option value="grass">Grass</option>
      </select>
      </div>

Answer 1

Потому что вы случайно поместили его в тег <label>

, почему эта строка

<label for="favorite-type" id="dropdown" name="favorite-type">Favorite starter type:<label>

Вы не сделали t закройте тег label (вы написали <label> вместо </label>)

, если вы хотите, чтобы <select> тоже находился справа, вам придется добавить это правило css:

.form select {
  float: right;
}

Вот код с подходящим закрывающим тегом (я также добавил float: right к выбору):

  .form {
  margin: 0 auto;
  width: 300px;
}

.form input {
  display: inline-block;
  text-align: left;
  float: right;
}

.form select {
  float: right;
}

.form label {
  display: inline-block;
  text-align: right;
  float: left;
}

body {
  background-color: grey;

<center>
  <h1 id="title">Pokemon survey</h1>
  <p id="description">Everyone likes Pokemon right?</p>
</center>

<div class="form" id="survey-form">
  <label for="name">Name: </label>
  <input type "text" id="name-label" name="Name" placeholder="Enter your name"><br><br>
  <label for="email">Email: </label>
  <input type="email" id="email-label" name="email" placeholder="Enter your Email"><br><br><br>
  <label for "favorite-generation">Favorite Pokemon generation: </label>
  <input type="number" id="number" min="1" max="8"><br><br>
  <label for="favorite-type" id="dropdown" name="favorite-type">Favorite starter type:</label>
  <select id="dropdown" name="favorite-type">
    <option value="fire">Fire</option>
    <option value="water">Water</option>
    <option value="grass">Grass</option>
  </select>
</div>

Answer 2

.form {
  margin: 0 auto;
  width: 300px;
}

.form input {
  display: inline-block;
  text-align: left;
  float: right;
}

/* .form label {
  display: inline-block;
  text-align: right;
  float: left;
} */
select{
  float: right;
}

body {
  background-color: grey;
  color: white;
}

<center>
  <h1 id="title">Pokemon survey</h1>
  <p id="description">Everyone likes Pokemon right?</p>
</center>

<div class="form" id="survey-form">
  <label for="name">Name: </label>
  <input type "text" id="name-label" name="Name" placeholder="Enter your name"><br><br>
  <label for="email">Email: </label>
  <input type="email" id="email-label" name="email" placeholder="Enter your Email"><br><br><br>
  <label for "favorite-generation">Favorite Pokemon generation: </label>
  <input type="number" id="number" min="1" max="8"><br><br>
  <label for="favorite-type" id="dropdown" name="favorite-type">Favorite starter type:</label>
      <select id="dropdown" name="favorite-type">
        <option value="fire">Fire</option>
        <option value="water">Water</option>
        <option value="grass">Grass</option>
      </select>
      </div>