在HTML中定位select元素

Question

我的HTML上有這個選擇元素，看起來像這樣

現在我想將我的選擇元素放在分割邊框的左上角，它似乎不會移動。 我做錯了嗎？ 我必須添加我的代碼嗎？

這是css：

 <style> body { background-image: url("img/wood.jpg"); } ​.MySelectCPU{ margin-top:20px; margin-left:200px; }​​​ </style> 

這是html代碼：

 <div style="font-family: Questrial; font-size:40px;">Administrative Control Panel Page</div><br> <div style="width:500px; font-family: Questrial; font-size:20px; border:1px solid #000; padding:100px;" align="center"> <select id="MySelectCPU" onchange="location = this.value;"> <option disabled selected hidden>Deployed Equipments</option> <option value="viewcpu.php">Deployed CPUs</option> <option value="viewmouse.php">Deployed Mouse</option> <option value="viewkeyboard.php">Deployed Keyboards</option> <option value="viewmonitor.php">Deployed Monitors</option> <option value="viewlaptop.php">Deployed Laptops</option> </select> </div><br clear="all"> <span style="padding-right: 10px; font-family: Questrial;" ><a href="logout.php" class="btn btn-primary">Logout</font></a></span> <span style="font-family: Questrial;"><a href="home.php" class="btn btn-primary">Profile</font></a></span> 

Answer 1

而不是padding ，使用height和width 。

 #container { width: 500px; font-family: Questrial; font-size: 20px; border: 1px solid #000; height: 200px; width: 100%; /* padding: 100px; */ } 

 <div style="font-family: Questrial; font-size:40px;">Administrative Control Panel Page</div><br> <div id="container"> <select id="MySelectCPU" onchange="location = this.value;"> <option disabled selected hidden>Deployed Equipments</option> <option value="viewcpu.php">Deployed CPUs</option> <option value="viewmouse.php">Deployed Mouse</option> <option value="viewkeyboard.php">Deployed Keyboards</option> <option value="viewmonitor.php">Deployed Monitors</option> <option value="viewlaptop.php">Deployed Laptops</option> </select> </div><br clear="all"> <span style="padding-right: 10px; font-family: Questrial;"><a href="logout.php" class="btn btn-primary">Logout</font></a></span> <span style="font-family: Questrial;"><a href="home.php" class="btn btn-primary">Profile</font></a></span> 

頂部邊框和select之間的間隙是由字體大小引起的。 要消除間隙，請減小font-size或設置較小的line-height 。

 #container { width: 500px; font-family: Questrial; /* font-size: 20px; */ border: 1px solid #000; height: 200px; width: 100%; /* padding: 100px; */ } 

 <div style="font-family: Questrial; font-size:40px;">Administrative Control Panel Page</div><br> <div id="container"> <select id="MySelectCPU" onchange="location = this.value;"> <option disabled selected hidden>Deployed Equipments</option> <option value="viewcpu.php">Deployed CPUs</option> <option value="viewmouse.php">Deployed Mouse</option> <option value="viewkeyboard.php">Deployed Keyboards</option> <option value="viewmonitor.php">Deployed Monitors</option> <option value="viewlaptop.php">Deployed Laptops</option> </select> </div><br clear="all"> <span style="padding-right: 10px; font-family: Questrial;"><a href="logout.php" class="btn btn-primary">Logout</font></a></span> <span style="font-family: Questrial;"><a href="home.php" class="btn btn-primary">Profile</font></a></span> 

Answer 2

而不是高度，寬度和填充，使用定位：

 <div style="font-family: Questrial; font-size:40px;">Administrative Control Panel Page</div><br> <div style="width:500px; font-family: Questrial; font-size:20px; border:1px solid #000; padding:100px;position:relative;" > <select id="MySelectCPU" onchange="location = this.value;" style="position:absolute;top:10px;left:10px;"> <option disabled selected hidden>Deployed Equipments</option> <option value="viewcpu.php">Deployed CPUs</option> <option value="viewmouse.php">Deployed Mouse</option> <option value="viewkeyboard.php">Deployed Keyboards</option> <option value="viewmonitor.php">Deployed Monitors</option> <option value="viewlaptop.php">Deployed Laptops</option> </select> </div><br clear="all"> <span style="padding-right: 10px; font-family: Questrial;" ><a href="logout.php" class="btn btn-primary">Logout</font></a></span> <span style="font-family: Questrial;"><a href="home.php" class="btn btn-primary">Profile</font></a></span> 

上面的代碼片段有一些變化。 我將父div設置為相對，將select元素設置為絕對，與父div的左上邊界距離為10px。

Answer 3

另一種選擇是將父div的位置設置為relative ，然后你可以在select元素上使用absolute定位， top設置為0 ， left為0 。

編輯：如果align和padding是您要保留的屬性，但是使用此元素覆蓋，這將非常有用。

Answer 4

你有. 在CSS中它尋找一個類。 .MySelectCPU { ...

但是你已經將它聲明為HTML中的ID元素，應該是class=MySelectCPU而不是id=或者將其更改為CSS中的#MySelectCPU 。

Answer 5

你在父div上有align="center" 。 將其移除以對齊左側的“選擇”框，然后相應地調整填充以使其位於所需位置。

 <div style="font-family: Questrial; font-size:40px;">Administrative Control Panel Page</div><br> <div style="width:500px; font-family: Questrial; font-size:20px; border:1px solid #000; padding:10px 5px;"> <select id="MySelectCPU" onchange="location = this.value;"> <option disabled selected hidden>Deployed Equipments</option> <option value="viewcpu.php">Deployed CPUs</option> <option value="viewmouse.php">Deployed Mouse</option> <option value="viewkeyboard.php">Deployed Keyboards</option> <option value="viewmonitor.php">Deployed Monitors</option> <option value="viewlaptop.php">Deployed Laptops</option> </select> </div><br clear="all"> <span style="padding-right: 10px; font-family: Questrial;" ><a href="logout.php" class="btn btn-primary">Logout</font></a></span> <span style="font-family: Questrial;"><a href="home.php" class="btn btn-primary">Profile</font></a></span>