时间戳

首页 > 解决方案 > 如何在页面两侧设置两个 div？

html - 如何在页面两侧设置两个 div？

问题描述

我在 div 中设置元素时遇到问题。如何设置显示左侧页面上的元素数量和右侧的搜索

这是代码的一部分：

<div class="header-size-section">
    <div class="lable-size-section">
        <select class="form-control size-list" id="table-size-list" name="table-size-list" onchange="tableSizeChanged(this)">
            <option>25</option>
            <option>50</option>
            <option>100</option>
            <option>all</option>
        </select>
    </div>
    <div class="header-search-section">
        <span class="table-search-list">Search: </span>
        <input type="text" class="search-table" />
    </div>
</div>

这是 JSFiddle

标签： htmlcss

解决方案

注意：（ .header-size-section将 display: flex 更改为 display: block）和.header-size-section>.header-search-section（你错过了点）

.bootstrap-table .table:not(.table-condensed),
.bootstrap-table .table:not(.table-condensed)>tbody>tr>th,
.bootstrap-table .table:not(.table-condensed)>tfoot>tr>th,
.bootstrap-table .table:not(.table-condensed)>thead>tr>td,
.bootstrap-table .table:not(.table-condensed)>tbody>tr>td,
.bootstrap-table .table:not(.table-condensed)>tfoot>tr>td {
  padding: 2px 3px 2px 3px;
}

.header-size-section {
  display: block;
  font-weight: 600;
  margin-bottom: 2px;
}

.size-list {
  padding-bottom: 1px;
  padding-top: 1px;
}

.table-search-list {
  margin: 0px;
  display: table-cell;
  vertical-align: middle;
  padding: 6px;
}

.search-table {
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.header-search-section,
.lable-size-section {
  display: inline-table;
}

.header-size-section>.header-search-section {
  float: right;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<div class="header-size-section justify-content-between">
  <div class="lable-size-section">
    <select class="form-control size-list" id="table-size-list" name="table-size-list" onchange="tableSizeChanged(this)">
            <option>25</option>
            <option>50</option>
            <option>100</option>
            <option>all</option>
        </select>
  </div>
  <div class="header-search-section">
    <span class="table-search-list">Search: </span>
    <input type="text" class="search-table" />
  </div>
</div>

推荐阅读