表单选择下拉选项不在正确的位置
Posted
技术标签:
【中文标题】表单选择下拉选项不在正确的位置【英文标题】：Form select dropdown options not at right place 【发布时间】：2016-12-18 07:04:12 【问题描述】：我是 Jquery 初学者。我正在尝试制作一个带有选择选项的提交表单。但是，我发现下拉选项不在正确的位置。它们在它们应该在的位置的稍上方和左侧。
我想要那些选项。就在“选择”对象的下方。
这是我的代码：
body
background: #333;
select,
option
background: rgba(255, 255, 255, 0.4) no-repeat scroll 16px 16px;
width: 276px;
height: 48px;
font-family: 'Source Sans Pro', sans-serif;
font-size: 18px;
color: #fff;
padding-left: 45px;
padding-top: 12px;
margin-bottom: 20px;
overflow: hidden;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
<body id="gradient" style="height:90vh">
<div id='title'class="container" style="border-style:solid;border-width:2px;border-color:#ffffff;height:23vh;width:45vw;margin: 0 auto;margin-top:150px;">
<h1 style="color:#ffffff;font-size: 250%;font-weight: 400;margin-top:60px" align="middle">VATek Web Configuration</h1>
</div>
<form name="broadcastform" id="broadcastform" method="post" action="">
<h1 id="broadcast_title" style="color:rgba(255,255,255,0.7);font-size: 250%;font-weight: 400;margin-top:-10px" align="middle">BROADCAST</h1>
<hr style="border-color:#ffffff;weight:40%;margin:0 auto;margin-bottom:20px">
<center class="page_intro">
<div style="margin-top:-1%;color:rgba(255,255,255,0.7);width:90%;margin-bottom:6.5%" class="page_intro">
<font size="6" style="line-height: 150%"class="page_intro"><center>Welcome!</center></font>
<font size="5" style=" padding-top:20px;line-height: 150%;font-weight:normal;opacity:0.7"class="page_intro"><center>This is a Tool to Configure and Broadcast Your Modulator. Please Follow the Steps and Fill in the Parameter Fields for Your Preference. Enjoy the Tour !</center></font>
</div>
</center>
<!-- Page Basic Setting -->
<select name="InputSource" class="required page_basic" style="margin-left:23%" form="broadcastform" >
<option value="">Broadcast Input</option>
<option value="0">HDMIPhy</option>
<option value="1">USB Streaming</option>
<option value="2">MPEC-TS Interface</option>
<option value="3">VIP(Ethernet)</option>
</select>
<select name="ModulationMode"class= "page_basic required" style="margin-left:23%" form="broadcastform">
<option value="">Modulation Mode</option>
<option value="1">ATSC</option>
<option value="2">DTMB</option>
<option value="3">DVB</option>
<option value="4">ISDB</option>
</select> 是否可以将这些选项文本放在框的中间？我只是很困惑如何控制该下拉框的可能性。
form
margin-left:auto;
margin-right:auto;
margin-top:80px;
width: 45vw;
height: 70vh;
padding:30px;
border: 1px solid rgba(0,0,0,.2);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
background: rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
-webkit-box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
overflow: hidden;
【问题讨论】：
你能提供你的html结构吗？ 我刚刚更新了它。 @Pawan 试试 text-align: center;用于制作文本中心 看起来不错，你的 CSS 代码中肯定有其他内容 我试了一下，还是不行。选项文本对齐：中心； 【参考方案1】：<select name="InputSource" class="required page_basic" style="text-align: center; margin-left:23%" form="broadcastform" >
<option value="">Broadcast Input</option>
<option value="0">HDMIPhy</option>
<option value="1">USB Streaming</option>
<option value="2">MPEC-TS Interface</option>
<option value="3">VIP(Ethernet)</option>
</select>
<select name="ModulationMode"class= "page_basic required" style="text-align:center; margin-left:23%" form="broadcastform">
<option value="">Modulation Mode</option>
<option value="1">ATSC</option>
<option value="2">DTMB</option>
<option value="3">DVB</option>
<option value="4">ISDB</option>
</select> 请检查这个。在这方面很好。看看吧。
【讨论】：
它看起来和你的演示完全一样。但是当我把那些CSS放在上面时。它发生在错误的位置。 @Pawan 然后尝试将其放入 HTML 代码中的样式中。在某些情况下，这些在 CSS 中不起作用以上是关于表单选择下拉选项不在正确的位置的主要内容，如果未能解决你的问题，请参考以下文章