显示图像下方的下拉值

Question

1 ）文字，下拉菜单＆amp;图像显示如下图像[ 4行 - 1 + 1 + 1 + 1]：

2 ）但我们需要显示如下图像 [ 3行 - 2 + 1 + 1]

3 ）我尝试下面的代码，现在显示如下图像[ 2行 - 2 + 2]

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

第一行很好，显示 SIZE＆amp; MATBOARD ，现在我需要在第2行显示“Frame style”，在第3行显示“Frame width”。

这是Site link

.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;
}

<dd>
  <dt>
      <label class="required">
       <em>*size</em>
       </label>
    </dt>
</dd>
<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>

Answer 1

同样，如果你对html没有影响，你可以做css hack

试

.product-options dt:nth-of-type(-n+2), .product-options dd:nth-of-type(-n+2) {
     display: inline-block;
     width: 90px;
    }

并从其他地方删除display: inline-block;和width。