Question

如何将label，select和button元素放在同一行？

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<input type="submit" value="Apply" class="btn m-b" style="float: right">
<!--The below div set the label and button on the same line-->
<div style="overflow: hidden; padding-right: .5em;">
<label style="padding-left:10px; display: inline-block;"for="page">Label Label : </label>
<!--select appears on the new line-->
<select class="form-control post_max m-b" name="page" style="    float: left;">
<option value="">.....</option>    
</select>
</div>

Answer 1

使用display: flex的容器。

https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties

.wrap {
  display: flex;
}

label {
  display: inline-block;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


<div class="wrap">
  
  <label for="page">Label: </label>

  <select class="form-control post_max m-b" name="page">
    <option value="">...</option>    
  </select>

  <input type="submit" value="Apply" class="btn m-b">
  
</div>

或者，如果您不想使用自定义css，请阅读有关Bootstrap 3内联表单的文档https://getbootstrap.com/docs/3.3/css/#forms-inline，请使用您在该页面上找到的相同代码段。

使用bootstrap在同一行上标记，选择和按钮元素

1 个答案: