Question

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

＆＃13;

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

＆＃13;

Answer 1

默认选择框在不同的浏览器上可以有不同的视图（宽度，高度......），所以当你以固定数量推送它时（例如5px），这可能会在不同的浏览器上产生不同的结果。

所以首先要更好地选择你的选择框以获得跨浏览器视图（无论如何你可以避免这一步，我的解决方案也可以在没有这个的情况下工作），例如：

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＆amp;彼此垂直选择：

.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

希望这会有所帮助：）

Answer 2

尝试取出边距并将vertical-align设置为top：

<h1 style="display: inline;"> Most popular     </h1>
<select class="selectpicker" style="vertical-align:top ">
  <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 3

这是一个粗略的答案。我已将此代码添加到您的select：position:relative; top:-5px;

＆＃13;

<h1 style="display: inline;"> Most popular     </h1>
<select class="selectpicker" style="position:relative; top:-5px; 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>

＆＃13;

如何向下移动下拉菜单

3 个答案: