logo标签列表

在 HTML 中定位选择元素

htmlcssforms
3
我在HTML中有一个下拉选择元素，长这样：

enter image description here

现在我想把它放在边框的左上角，但是它似乎无法移动。我做错了吗？我需要在代码中添加什么吗？
以下是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>

1
在这一行中 <div style="width:500px; font-family: Questrial; font-size:20px; border:1px solid #000; padding:100px;" align="center"> 你正在声明 div 内的 100px 填充。结果它超出了你定义的宽度并强制该元素居中，如果我正确理解你的问题，你想要它在左上角？ - defteH
它只是使边框变窄了。 - Joe F
5个回答
3

不要使用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 之间的间隙是由字体大小引起的。要去除这个间隙，请减小字体大小或设置更小的 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>

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定位为相对位置，将选择元素绝对定位，并与父div的上和左边框保持10px的距离。
2
另一种选择是将父级 div 的定位设置为 relative，然后您可以在 select 元素上使用绝对定位，将 top 设置为 0，将 left 设置为 0。
编辑：如果您想保留 align 和 padding 属性，并使用此元素进行覆盖，则这将非常有用。
2

在CSS中，.表示查找一个类。

但是你在HTML中将它声明为一个ID元素，应该使用class=MySelectCPU而不是id=或者在CSS中更改为#MySelectCPU。

1
您的父级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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接