Question

我是Jquery的初学者。我正在尝试使用其中的选择选项制作提交表单。但是，我发现下拉选项不在正确的位置。它们位于它们应该位于的地方的上方和左侧。

我想要那些选择。在＃34;正下方选择＆＃34;对象

这是我的代码：

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

是否可以将这些选项文本放在框中？我很困惑如何控制下拉框的可能性。

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; 
}

Answer 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>

请检查一下。在这方面很好。看一看。

表格选择下拉选项不在正确的位置

1 个答案: