我在使用谷歌浏览器时设置了这个代码块的样式,正如你在这张图片中看到的那样,它对齐得很好。
但是用 Firefox 浏览时显示不正确
我做错了什么?
.full-panel select {
-webkit-appearance:none;
background-color:#1B6B80;
background-position:95% 50%;
background-repeat:no-repeat;
border:1px solid #1B6B80;
border-radius:2px;
color:#FFFFFF;
display:block;
font-size:10px;
height:30px;
line-height:10px;
padding-left:5px;
padding-right:25px;
position:absolute;
right:150px;
top:30px;
width:150px;
}
<form method="POST" action="/" accept-charset="UTF-8"><input name="_token" type="hidden" value="M7sQaw7MVFV4DQhoyMxdiuJPB7E5KbaWVB5U9lbp">
<div class="full-panel">
<input name="quick" value="1" type="hidden">
<input class="biginput" type="text" name="name" placeholder="Set up your free website">
<select name="domain_id">
<option>mysite.com</option>
</select>
<input class="bigbutton" type="submit" value="Submit">
</div>
</form>
最佳答案
当您必须使用绝对位置时,请确保其父容器具有相对位置
.full-panel {
position:relative;
}
这样你就可以开始计算相对于它的容器而不是相对于主体的像素(顶部:30px)
关于html - Firefox 中的 CSS 顶部定位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32030479/