HTML CSS如何在其他列中居选择?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (66)

我想选择更好地对齐/空出到右侧的方法:

即“License Quantity”旁边的选择。我想在右边更多地移动数字,因为看起来更合适。

代码如下:

<div class="field-group">

  <div style="text-align: center;" class="field field--with-dropdown clearfix">
    <label for="field-qty">License Quantity</label>
    <select style="text-align: center; margin-left: 25em" id="field-qty-num" onchange="qty_change()">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>6</option>
      <option>7</option>
      <option>8</option>
      <option>9</option>
    </select>

  </div>

  <div class="field">
    <label for="field-phone">User Training Manual</label>
    <input id="field-phone" type="text" class="form-control" style="text-align: center;" placeholder="Included for free!" readonly />
  </div>

  <div class="field">
    <label for="field-phone">User Training Videos</label>
    <input id="field-phone" type="text" class="form-control" style="text-align: center;" placeholder="Included for free!" readonly />
  </div>

  <div class="field">
    <label for="field-phone">6 Months Tech Support</label>
    <input id="field-phone" type="text" style="text-align: center;" class="form-control" placeholder="Included for free!" readonly />
  </div>

</div>

谢谢你的帮助!

提问于
用户回答回答于

如果不对特定宽度进行硬编码,就可以采用flexbox方法:

<div style="display:flex;justify-content:space-between;/*or space-evenly*/" class="field field--with-dropdown clearfix"> 
<label for="field-qty">License Quantity</label>
 <select id="field-qty-num" onchange="qty_change()"> 
<option>1</option> 
<option>2</option> 
<option>3</option> 
<option>4</option> 
<option>5</option>
<option>6</option> 
<option>7</option>
<option>8</option>
<option>9</option>
</select> </div>
用户回答回答于

关键是text-align-last:right;,会将选择项带到右侧。

label {
  display: inline-block;
  min-width: 200px;
  background:#DDD;
}

.itemRight {
  min-width: 200px;
}

select {
   text-align-last:right;
}

#field-qty-num, option {
  width: 204px;
  text-align: center;
}
<div class="field-group">

  <div style="" class="field field--with-dropdown clearfix">
    <label for="field-qty">License Quantity</label>
    <select style="" class="itemRight" id="field-qty-num" onchange="qty_change()">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>6</option>
      <option>7</option>
      <option>8</option>
      <option>9</option>
    </select>

  </div>

  <div class="field">
    <label for="field-phone">User Training Manual</label>
    <input id="field-phone" type="text" class="itemRight form-control" style="text-align: center;" placeholder="Included for free!" readonly />
  </div>

  <div class="field">
    <label for="field-phone">User Training Videos</label>
    <input id="field-phone" type="text" class="itemRight form-control" style="text-align: center;" placeholder="Included for free!" readonly />
  </div>

  <div class="field">
    <label for="field-phone">6 Months Tech Support</label>
    <input id="field-phone" type="text" style="text-align: center;" class="itemRight form-control" placeholder="Included for free!" readonly />
  </div>
</div>

扫码关注云+社区

领取腾讯云代金券