Ich habe ein Problem mit dem Setzen von Elementen in einem Div. Wie kann ich festlegen, dass die Anzahl der Elemente auf der linken Seite und die Suche auf der rechten Seite angezeigt werden?

Hier ist ein Teil des Codes:

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

Hier ist die JSFiddle

1
Kamil M 18 Jän. 2019 im 11:23

3 Antworten

Beste Antwort

Beachten Sie Folgendes: .header-size-section (Anzeige ändern: Flex in Anzeige: Block ändern) und .header-size-section>.header-search-section (Sie haben Punkte verpasst)

.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>
1
Alvin Theodora 18 Jän. 2019 im 08:33

Sie verwenden Bootstrap. Verwenden Sie die Bootstrap-Klasse justify-content-between. Dies stellt sicher, dass die Elemente in diesem Block einen äquivalenten Abstand zwischen ihnen haben.

Da es nur zwei Elemente gibt, erhalten Sie vollständigen Platz in der Mitte.

Sie können auch justify-content-around verwenden.

.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: flex;
  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>

Dies ist ein Beispiel mit justify-content-around.

.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: flex;
  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-around">
  <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>
1
Prajwal 18 Jän. 2019 im 08:27

Sie können dies einfach tun und den Rest des CSS entfernen:

.header-size-section {
  display: flex;
  font-weight: 600;
}

.lable-size-section {
  margin-right: 25px;
}

.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;
}
0
Josh Kelly 18 Jän. 2019 im 09:15