не могу понять, почему выпадающее меню не соответствует указанным выше полям ввода текста

#html #css

#HTML #css

Вопрос:

Я не могу понять, почему выпадающее меню «Любимая еда» не совпадает с полями ввода текста над ним.

Я попытался обойти множество открывающих и закрывающих тегов, чтобы посмотреть, поможет ли это, но ничего не добился. Пытался добавить несколько тегов разрыва, ничего. Я также пытался использовать свойство grid и display с разными значениями. Я также пробовал использовать css-сетки, но это вообще не сработало. изображение веб-сайта

   #survey-form{
    background-color:gray;
    border-radius:10px;
    z-index:2;
    position:relative;
    /*top:-700px;*/
    padding-top:30px;
    padding-bottom:100px;
    width:60%;
    margin:0px auto;
    opacity:70%;
    text-align:center;
  }

.labels{
  display: inline-block; 
  text-align: right;
  vertical-align:top;
  width: 40%;
  padding: 5px;
font-family:Helvetica;
  color:white;
  /*background:white;*/
  float:left;
}

.input {
  width: 280px;
  height: 29px;
  border-radius: 2px;
  border: 5px;
  border-color: grey; 
}

.right{
  display:inline-grid;
  text-align: left;
  width: 18%;
  margin:0px auto;
  /* background:yellow;*/
  
} 
 <div class="survey">
  <form id="survey-form">
    
    
  <label for="name" id="name-label"
class="labels"> Name: </label>
    
    <div class="right">
      <input id="name" class="input" type="text" placeholder="Name" required>
    </div><br>
    
    <label for="email"  id="email-label" class="labels"> Email: </label>
    
    <div class="right">
    <input id="email" class="input" type="email" placeholder="Email" required>
    </div><br>
    
   <label for="number"  id="number-label" class="labels">  Age: </label>
    
    <div class="right">
    <input id="number" class="input"  type="number" placeholder="Enter Age" min="1" max="120" required>
      </div><br>
      
      <!--problem starts here-->
    
      <label for="food" class="labels"> Favorite Food:</label>
    
    <div class:"right">
      <select id="dropdown" name="food" class="input"><br>
        
      <option value="select"> Select an option </option>
        <option value="pizza"> Pizza </option>
   
      <option value="biryani"> Biryani </option>
    
    <option value="fried-rice"> Fried Rice </option> 
        </select>
        </div><br>
        
        <!--problem ends here-->
  
<label class="labels" for="radio">Chicken or Steak:</label>
  
  <ul class="right" style="list-style: none;">
    
   <li class="radio"> 
<input name="radio-buttons" value="1"  type="radio"><label>Chicken</label>
  
</input></li>
  
  <li class="radio">
  <input name="radio-buttons" type="radio" value="2" ><label>Steak</label></input></li>
  
 </ul><br></br>
    
  <label for="sports" class="labels"> What sport(s) do you play</label>

<ul id="sports" style="list-style: none" class="right"> 
  
 <li class="checkbox"><label><input type="checkbox" id="hockey" value="1"> Hockey</label></input></li>


<li class="checkbox"><label><input type="checkbox" id="badminton"value="2"> Badminton </label></input></li>

<li class="checkbox"><label><input type="checkbox" id="badminton"value="3"> Basketball(#ballislife) </label></input></li>

<li class="checkbox"><label><input type="checkbox" id="soccer"value="4"> Soccer </label></input></li>

</ul><br>

<label for="comment" class="labels"> Any Comments or Suggestions? </label>
<textarea id="comment" name="comment" rows="4" cols="50" placeholder="Comments here..."></textarea>
<br></br>


<button id="submit" type="submit">Submit</button>

 </form>
  </div> 

Комментарии:

1. Я отредактировал фрагмент, чтобы он был виден при комментировании top:-700px; . Я думаю, что исправление проблемы с классом заставит его работать сейчас. (см. Ответ ниже.)

Ответ №1:

В div, который содержит выпадающий список, у вас синтаксическая ошибка <div class:"right"> . Так и должно быть <div class="right"> . Возможно, это вызывает проблему.