以 2 行而不是 4 行显示文本和下拉列表
Display text and Dropdown in 2 lines instead of 4 lines
我们有 4 个文本和下拉菜单 ,每个都有不同的下拉框显示在 4 行 中,如下所示:
我们想在一行中显示 2 个文本和下拉菜单,并在该行下方显示其他 2 个。
我试过 float : left ; , display :block; display: inline-block
对我来说没有任何效果,而是显示如下:
如果有人想要,这里是 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>
使用每 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-block
与 vertical-align: middle
一起应用以正确对齐它们。像这样:
dd, dt {
display: inline-block;
vertical-align: middle;
}
注意:您可能还想使 CSS 选择器比上面的示例更具体一些。
试试这个代码:
.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;
}
<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>
这可能适合你
样式:
dd, dt{
float: left;
display: inline-block;
}
dt{
margin-top: 15px !important;
margin-left: 10px !important;
}
我建议使用 bootstrap 网格系统以获得更好的外观。
<!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>
<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;
}
有很多方法可以做到。
- 与 bootstrap
- 与Table
- 与Div
这是 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 使用 table
为您的代码尝试这个
.product-options dt {
float:left;
max-width:20%;
}
.product-options dd {
float:left;
max-width:28%;
}
将此添加到您的 css,让我知道这是否是您需要的?
.product-options dt, .product-options dd {
width: 90px;
vertical-align: middle;
margin: 0 5px 0 0;
display: inline-block;
}
我们有 4 个文本和下拉菜单 ,每个都有不同的下拉框显示在 4 行 中,如下所示:
我们想在一行中显示 2 个文本和下拉菜单,并在该行下方显示其他 2 个。
我试过 float : left ; , display :block; display: inline-block
对我来说没有任何效果,而是显示如下:
如果有人想要,这里是 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>
使用每 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-block
与 vertical-align: middle
一起应用以正确对齐它们。像这样:
dd, dt {
display: inline-block;
vertical-align: middle;
}
注意:您可能还想使 CSS 选择器比上面的示例更具体一些。
试试这个代码:
.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;
}
<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>
这可能适合你
样式:
dd, dt{
float: left;
display: inline-block;
}
dt{
margin-top: 15px !important;
margin-left: 10px !important;
}
我建议使用 bootstrap 网格系统以获得更好的外观。
<!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>
<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;
}
有很多方法可以做到。
- 与 bootstrap
- 与Table
- 与Div
这是 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 使用 table
为您的代码尝试这个
.product-options dt {
float:left;
max-width:20%;
}
.product-options dd {
float:left;
max-width:28%;
}
将此添加到您的 css,让我知道这是否是您需要的?
.product-options dt, .product-options dd {
width: 90px;
vertical-align: middle;
margin: 0 5px 0 0;
display: inline-block;
}