#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">
. Возможно, это вызывает проблему.