以 2 行而不是 4 行显示文本和下拉菜单

【问题标题】：Display text and Dropdown in 2 lines instead of 4 lines以 2 行而不是 4 行显示文本和下拉菜单
【发布时间】：2017-05-27 13:05:36
【问题描述】：

我们有 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>

【问题讨论】：

  • 请始终使用正确的缩进。
  • @Roope 抱歉，让我编辑问题.....
  • span 元素非常擅长水平对齐。
  • @HermannIngjaldsson 非常感谢您的建议，我会遵循它.....

标签： dropdownbox


【解决方案1】：

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

<!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>

【讨论】：

  • 谢谢，我试过你的代码，但由于这是magento站点，值将保存在数据库中，inspect元素的html结构与实际文件中的不同，有什么办法可以解决这个问题只有css？
  • 感谢您的支持，我找到了解决方案，很抱歉，由于我的编码能力很差，我未能正确遵循您的解决方案.....
  • @user5348fh8y5 很好..很高兴为您提供帮助。你可以在你的代码中编辑和使用这支笔。codepen.io/shivk/pen/ggMaOE
  • @user5348fh8y5 欢迎老兄！并继续编码！
【解决方案2】：

试试这个代码：

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

【讨论】：

  • 谢谢，我试过你的代码，但由于这是magento站点，值将保存在数据库中，inspect元素的html结构与实际文件中的不同，有什么办法可以解决这个问题只有css？
  • 谢谢，我更新了你的css代码，请检查link
  • 无法访问您的链接
  • 您现在可以再检查一下吗.....也请在私人窗口中尝试...
  • 移除margin-top:50px;来自 css 中的 .required 和 dd 类
【解决方案3】：

有很多方法可以做到这一点。

  1. 带引导程序
  2. 有桌子
  3. 带分区

这是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%;
}

【讨论】：

  • 谢谢，我试过你的代码，但由于这是magento站点，值将保存在数据库中，inspect元素的html结构与实际文件中的不同，有什么办法可以解决这个问题只有css？
  • 您能否访问link并检查是否有任何方法可以仅使用css解决
  • @user5348fh8y5 检查更新的答案。希望你想要这个。
  • 谢谢，它在 2 行中显示，请帮我使它看起来更好，现在显示 like this
  • 在我尝试了你的代码之后，现在我无法选择下拉选项，请检查link
【解决方案4】：

将此添加到您的 css 中，如果您需要，请告诉我？

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

【讨论】：

  • 你需要什么？
【解决方案5】：

这可能对你有用

样式：

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

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

【讨论】：

  • 谢谢，我试过你的代码，但由于这是magento站点，值将保存在数据库中，inspect元素的html结构与实际文件中的不同，有什么办法可以解决这个问题只有css？
  • 能否请您访问link并检查是否有任何方法可以仅使用css解决
  • @user5348fh8y5，在你的风格中试试这个更新的代码
  • 谢谢，它看起来有 2 行，请帮我让它看起来更好，现在它显示 like this
  • 在我尝试了你的代码之后，现在我无法选择下拉选项，请检查link
【解决方案6】： 
<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;
    }

【讨论】：

  • 谢谢，但由于这是magento站点，值将保存在数据库中，并且inspect元素的html结构与真实文件中的不同，有没有办法只用css解决这个问题？
  • 检查我的答案！
  • 有什么方法可以仅借助 css 解决问题吗？
  • 看看那个人！它只是通过更改 css 来工作，我已经更新了答案
  • 我希望现在你不会要求我建立你的整个页面，伙计，检查我的答案
【解决方案7】：

每 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 选择器比上面的示例更具体一些。

【讨论】：

  • 谢谢，我试过你的代码，但由于这是magento站点，值将保存在数据库中，inspect元素的html结构与实际文件中的不同，有什么办法可以解决这个问题只有css？
  • 这会很困难，因为它必须知道在两次下拉菜单之后它需要进入一个新行。或者，您还可以为 dd 和 dt 元素添加固定宽度，以强制它们在填充 100% 的空间后使用新行。但在语义上，将它们包裹在一个 div 周围会增加更多的灵活性。
  • 感谢您的支持，我找到了解决方案，很抱歉，由于我的编码能力很差，我未能正确遵循您的解决方案.....
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-01-02
  • 1970-01-01
  • 2012-07-01
  • 2018-02-02
  • 1970-01-01
  • 2012-05-27
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode