html - 在图像下方显示下拉值

Question

1) 文本、下拉菜单和图像显示如下图 [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 & MATBOARD ，现在我需要在第二行显示“Frame style”和“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;
    }

并从 other 中删除 display: inline-block; 和 width。