【问题标题】:Label and select on the same line标签和选择在同一行
【发布时间】:2017-12-27 09:50:47
【问题描述】:

如果出现此代码,我如何将我的标签和我的选择放在同一行?

<div class="form-group">
    <div>
    <label>Filtrar por Categoria:</label>
       <div id="select-categories"></div>
    </div>
 </div>

Javascript:

$("#select-categories").each( function ( i ) {
                    var select = $('<select class="form-control"><option value=""></option></select>')
                        .appendTo( $(this).empty() )
                        .on( 'change', function () {
                            table.column( [2] )
                                .search( $(this).val() )
                                .draw();
                        } );

                    table.column([2]).data().unique().sort().each( function ( d, j ) {
                        select.append( '<option value="'+d+'">'+d+'</option>' )
                    } );
                } );

【问题讨论】:

标签: javascript css twitter-bootstrap-3


【解决方案1】:

您可以将显示设置为 inline-block,如下面的 sn-p 所示。另一个好方法是使用Boostrap's column or grid systems。顺便说一句,您的 JavaScript 引用了您从未定义过的 html 元素。因此,我没有使用它。另外,您的标签是空白的,我添加了一些文本进行测试。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
    <div>
    <label style="display: inline-block;">Filtrar por Categoria:</label>
       <div style="display: inline-block;" id="select-categories">Label</div>
    </div>
 </div>

【讨论】:

  • 完美。很高兴为您提供帮助
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-03-27
  • 1970-01-01
  • 2014-02-26
  • 1970-01-01
  • 2011-07-20
  • 1970-01-01
相关资源
最近更新 更多