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

时间:2017-01-12 12:11:24

标签: dropdownbox

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

enter image description here

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

我尝试了float : left ; , display :block; 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>

7 个答案:

答案 0 :(得分:3)

我建议使用bootstrap网格系统以获得更好的外观。

&#13;
&#13;
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  
  <form>
   <div class="row">
  	 
     <div class="col-xs-6">
      <div class="form-group">
      <label for="sel1">Select Text</label>
      <select class="form-control" id="sel1">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
      </select>
     </div>
    </div>
   
   <div class="col-xs-6">
      <div class="form-group">
      <label for="sel1">Select Text</label>
      <select class="form-control" id="sel1">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
      </select>
      </div>
    </div>
      
   </div>
   
   
   <div class="row">
  	 
     <div class="col-xs-6">
      <div class="form-group">
      <label for="sel1">Select Text</label>
      <select class="form-control" id="sel1">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
      </select>
     </div>
    </div>
   
   <div class="col-xs-6">
      <div class="form-group">
      <label for="sel1">Select Text</label>
      <select class="form-control" id="sel1">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
      </select>
      </div>
    </div>
      
   </div>
     
     
    </div>
  </form>
</div>

</body>
</html>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

试试这段代码:

&#13;
&#13;
.required {
    float: left;
    padding-left: 15px;
  margin-top:50px;
}

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

dd {
    display: block;
    
  float:left;
  margin-top:50px;
}
&#13;
<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>
&#13;
&#13;
&#13;

答案 2 :(得分:1)

<div>
    <div class="s">
        <dt>
           <label class="required">
             <em>*size</em>
           </label>
        </dt>
        <dd class="d">
         <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>
  </div>
  <div class="s">
     <dt>
        <label class="required">
           <em>*Frame style</em>
        </label>
     </dt>
     <dd class="d">
        <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>
  </div>

<style>
  .s{
     display: inline-flex;
    }
  .d{
     margin: 0;
    }

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

答案 3 :(得分:1)

有很多方法可以做到。

  1. with bootstrap
  2. 使用表
  3. 使用Div
  4. 这是Demo and Code使用div

    CSS

    .row{
          float:left;
          width:100%;
        }
       .col{
          float:left;
          width:50%
        }
       .required {
                float: left;
                padding-right: 15px;
            }
    

    HTML

    <div class="row">
    <div class="col">
    <label class="required">
       <em>*size</em>
       </label>
     <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>
    <div class="col">
     <label class="required">
       <em>*Frame style</em>
       </label>
    <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>
    </div>
    <div class="row">
    <div class="col">
    <label class="required">
       <em>*Frame style Size</em>
       </label>
      <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>
    <div class="col">
     <label class="required">
       <em>*Matboard</em>
       </label>
    <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>
    </div>
    

    希望它有助于:)

    这是Demo and Code使用表格

    尝试使用您的代码

    .product-options dt {
    float:left;
    max-width:20%;
    }
    .product-options dd {
    float:left;
    max-width:28%;
    }
    

答案 4 :(得分:0)

这可能适合你

<强>样式:

dd, dt{
  float: left;
  display: inline-block;
}

dt{
  margin-top: 15px !important;
  margin-left: 10px !important;
}

答案 5 :(得分:0)

将此添加到您的CSS中,如果您需要,请告诉我们?

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

答案 6 :(得分:-1)

每2个下拉列表使用周围的包装器来创建行。

<div class="wrapper">
    <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>
</div>

然后,您可以将display: inline-blockvertical-align: middle一起应用以正确对齐它们。像这样:

dd, dt {
    display: inline-block;
    vertical-align: middle;
}

注意:您可能还希望使CSS选择器比上面的示例更具体。