无法弄清楚为什么下拉菜单不会与上述文本输入框对齐

Question

我不明白为什么最喜欢的食物下拉菜单不会与上面的文本输入框对齐。

我试过移动很多开始和结束标签，看看是否有帮助，但一无所获。 尝试添加一些中断标签，没有。 我还尝试使用具有不同值的网格和显示属性。 我还尝试使用 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>

Answer 1

在包含下拉列表的 div 中，您有一个语法错误<div class:"right"> 。 它应该是<div class="right"> 。 也许这是导致问题的原因。