html - 如何向上移动下拉菜单

Question

我无法将下拉菜单向上移动...以使其与文本更好地对齐。我尝试了 margin-top:-10px 但它似乎没有任何效果。

<h1 style="display: inline;"> Most popular     </h1>
<select class="selectpicker" style="margin-bottom: 20px; margin-top: -20px">
  <option id="7">last week</option>
  <option id="30">last month</option>
  <option id="180">last 6 months</option>
  <option id="365">last year</option>
</select>

Answer 1

默认选择框在不同的浏览器上可以有不同的 View (宽度、高度......)，所以当你以固定的数量(例如 5px)将它向上推时，这在不同的浏览器上可能会有不同的结果。

所以最好首先设置您的选择框的样式以具有跨浏览器 View (无论如何您可以避免此步骤，我的解决方案也可以在没有此的情况下工作)例如:

select {    
    width: 200px;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
}

示例 1 提供了如何将 h1 和 select 彼此垂直对齐:

.example1 h1,
.example1 select {
  display: inline-block;
  vertical-align: middle;
  line-height: 35px; /* set any value as you need */
}

<div class="example1">
   <h1>Most popular</h1>
   <select class="selectpicker">
      <option id="7">last week</option>
      <option id="30">last month</option>
      <option id="180">last 6 months</option>
      <option id="365">last year</option>
   </select>
</div>

示例 2 提供了如何根据需要相对于 h1 元素定位选择框，只需设置顶部位置即可:

.example2 {
  display: inline-block;
  position: relative;
  padding-right: 200px; /* set value equal to select-box width */
}

.example2 select {
  top: 3px; /* set any value to position select-box */
  right: 0;  
  display: block;
  position: absolute;    
}

<div class="example2">
    <h1>Most popular</h1>
    <select class="selectpicker">
        <option id="7">last week</option>
        <option id="30">last month</option>
        <option id="180">last 6 months</option>
        <option id="365">last year</option>
     </select>
 </div>

查看工作示例 here

希望这会有所帮助:)