如何均匀地放置下拉框?

时间:2018-11-20 08:14:16

标签: html css

我正在尝试均匀放置下拉框。我希望每当用户选择一个下拉框时,选项均等地间隔开。我尝试使用保证金,但这似乎行得通,但是由于某些原因,我无法将其推得足够低。...

<div class="subscriptionplan">
         <select name="subscriptionplan">
            <option value="">Choose Subscription Plan 1</option>
            <option value="None">None</option>
            <option value="Level 1">Level 1</option>
            <option value="Level 2">Level 2</option>
            <option value="Level 3">Level 3</option>
         </select>
         <br></br>
         <select name="pricing_level1">
          <option value="">Choose a price plan for Level 1</option>
          <option value="None">None</option>
          <option value="100">Monthly:$100</option>
          <option value="800">Yearly:$800</option>
          </select>
        <br></br>
        <select name="pricing_level2">
          <option value="">Choose a price plan for Level 2</option>
          <option value="None">None</option>
          <option value="150">Monthly:$150</option>
          <option value="1300">Yearly:$1300</option>
          </select>
          <br></br>
          <select name="pricing_level3">
          <option value="">Choose a price plan for Level 3</option>
          <option value="None">None</option>
          <option value="200">Monthly:$200</option>
          <option value="1800">Yearly:$1800</option>
          </select>

         <br></br>
         <button type="submit" name="submit">Sign up</button>
      </form>
           </div>

This is the CSS code:

div.subscriptionplan {
  position: absolute;
  right: 180em;
  bottom: 60em;
}
div.subscriptionplan select{
   margin: 180em;

}

1 个答案:

答案 0 :(得分:0)

em不等于px。

div.subscriptionplan {
  position: absolute;
  right: 180em;
  bottom: 60em;
}
div.subscriptionplan select{
   margin: 180em;

}

/ * ------------------------ * / 您没有添加绝对位置的上下文。 假设您需要CSS并排放置选择框,请参考以下内容。您可以删除br标签。

div.subscriptionplan {
    /*  position: absolute;
      right: 180em;
      bottom: 60em;*/
      display:block;
      width:100%;
    }
    div.subscriptionplan select{
      /* margin: 180em;*/
       margin:0.5em;
       display:inline-block;
       max-width:33.3%;

    }