下拉框 – 以2行而不是4行显示文本和下拉列表

我们有4个文字&每个下拉列表都有不同的下拉框,显示在4行中,如下所示:

enter image description here

我们想要显示2 Text&下线一行&该线以下另外2个.

我试过漂浮:左; ,显示:块; display:inline-block没有对我有用,而是显示如下:

enter image description here

如果有人想要,这里是site link

 <dt>
   <label class="required">
   <em>*size</em>
   </label>
</dt>
<dd>
   <div>
      <select name="options[325]" id="select_325" class=" required-entry product-custom-option" title="" onchange="opConfig.reloadPrice()">
         <option value="4397" price="30">Mini ( 16.98″x12.00″ ) +Rs30.00</option>
         <option value="4398" price="40">Small  ( 16.98″x12.00″ ) +Rs40.00</option>
      </select>
   </div>
</dd>
<dt>
   <label class="required">
   <em>*Frame style</em>
   </label>
</dt>
<dd>
   <div>
      <select name="options[325]" id="select_325" class=" required-entry product-custom-option" title="" onchange="opConfig.reloadPrice()">
         <option value="4397" price="30">Cherry</option>
         <option value="4398" price="40">Natural</option>
      </select>
   </div>
</dd>
<dt>
   <label class="required">
   <em>*Frame style Size</em>
   </label>
</dt>
<dd>
   <div>
      <select name="options[325]" id="select_325" class=" required-entry product-custom-option" title="" onchange="opConfig.reloadPrice()">
         <option value="4397" price="30">0.75</option>
         <option value="4398" price="40">1.25</option>
      </select>
   </div>
</dd>
<dt>
   <label class="required">
   <em>*Matboard</em>
   </label>
</dt>
<dd>
   <div>
      <select name="options[325]" id="select_325" class=" required-entry product-custom-option" title="" onchange="opConfig.reloadPrice()">
         <option value="4397" price="30">Black</option>
         <option value="4398" price="40">White</option>
      </select>
   </div>
</dd>

CSS

 <style>

    .required {
        float: left;
        padding-right: 15px;
    }

    .product-options dd {
        padding: 0 0 10px 0;
        margin: 0 0 5px;
        border-bottom: 1px solid #ededed;
    }

    dd {
        display: block;
        -webkit-margin-start: 40px;
    }

    </style>
最佳答案
将此添加到您的CSS,请告诉我这是否是您需要的?

.product-options dt, .product-options dd {
    width: 90px;
    vertical-align: middle;
    margin: 0 5px 0 0;
    display: inline-block;
}

转载注明原文:下拉框 – 以2行而不是4行显示文本和下拉列表 - 代码日志