如何將 div 與表格正確對齊？
[英]How can I right align a div with a table?
問題描述
我有一個真正困擾我的 CSS 問題。 我有一個帶有標題和選擇的 div 容器。 我也有一張桌子，我想讓我的選擇與我的桌子對齊。
這就是我要的：
我將我的選擇設置為向右浮動，它按預期結束在屏幕的右端。 問題是我的表格寬度不是屏幕的 100%（並且寬度實際上可能會有所不同）。
這就是我得到的：
如何使我的 div 容器與我的桌子對齊？
這是我迄今為止嘗試過的：
table, th, td { border-collapse: collapse; border: 1px solid black; } .mytable { clear: both; } .mysortdiv { float: right; }
<div class="mysortdiv"> <div>Sort</div> <select> <option value="1">First sort option</option> <option value="2">Second sort option</option> </select> </div> <table class="mytable"> <thead> <tr> <th>My first column</th> <th>My second column</th> </tr> </thead> <tbody> <tr> <td>Something 1</td> <td>Other thing 1</td> </tr> <tr> <td>Something 2</td> <td>Other thing 2</td> </tr> </tbody> </table>
6 個解決方案
解決方案1
2 2020-01-23 12:22:28
你可以把它包裝在一個 div 中嗎？ 然后將每個 div 設置為向右浮動！
解決方案2
2 已采納 2020-01-23 12:27:21
這是一個可能的解決方案 -
<div class="container">
<div class="mysortdiv">
<div>Sort</div>
<select>
<option value="1">First sort option</option>
<option value="2">Second sort option</option>
</select>
</div>
<table class="mytable">
<thead>
<tr>
<th>My first column</th>
<th>My second column</th>
</tr>
</thead>
<tbody>
<tr>
<td>Something 1</td>
<td>Other thing 1</td>
</tr>
<tr>
<td>Something 2</td>
<td>Other thing 2</td>
</tr>
</tbody>
</table>
</div>
table,
th,
td {
border-collapse: collapse;
border: 1px solid black;
}
.container {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.mysortdiv {
margin-bottom: 10px;
margin-left: 110px;
}
這是筆 - https://codepen.io/orby32/pen/XWJOEJg
我刪除了所有浮點數，而是用container div 包裹了表格和選擇，它們具有display: flex; . 使用今天被認為是對齊元素的最差做法的浮動。
解決方案3
1 2020-01-23 12:22:27
使用
CSSfloat:right;為您的餐桌
.mytable{float:right;}
<html> <head> <style> table,th,td {border-collapse: collapse; border: 1px solid black;} .mytable {clear: both;} .mysortdiv {float:right;} </style> </head> <body> <div class="mysortdiv"> <div>Sort</div> <select> <option value="1">First sort option</option> <option value="2">Second sort option</option> </select> </div><br><br><br> <table class="mytable"> <thead> <tr> <th>My first column</th> <th>My second column</th> </tr> </thead> <tbody> <tr> <td>Something 1</td> <td>Other thing 1</td> </tr> <tr> <td>Something 2</td> <td>Other thing 2</td> </tr> </tbody> </table> </body>
解決方案4
1 2020-01-23 14:47:12
建立表格的最佳方法是將其包裝在div 。 在所有元素上使用百分比將使移動友好。
<div class="mysortdiv">
<div>Sort</div>
<select>
<option value="1">First sort option</option>
<option value="2">Second sort option</option>
</select>
</div>
<div class="tbl">
<table class="mytable">
<thead>
<tr>
<th>My first column</th>
<th>My second column</th>
</tr>
</thead>
<tbody>
<tr>
<td>Something 1</td>
<td>Other thing 1</td>
</tr>
<tr>
<td>Something 2</td>
<td>Other thing 2</td>
</tr>
</tbody>
</table>
</div>
用這個 css
table {
width: 100%;
border-spacing: 0;
border-collapse: collapse;
}
thead, tbody, tr {
width: inherit;
}
th, td {
vertical-align: top;
text-align: left;
white-space: normal;
}
.mysortdiv {
width: 50%;
margin-left: 50%;
}
.tbl {
width: 100%;
}
.mysortdiv *,
.tbl * {
margin: 0;
box-sizing: border-box;
}
.mysortdiv div,
.mysortdiv select {
width: 100%;
padding: 4px 6px;
font-size: inherit;
}
.tbl table {
border-top: 1px solid silver;
border-left: 1px solid silver;
}
.tbl th,
.tbl td {
width: 50%;
padding: 4px 6px;
border-right: 1px solid silver;
border-bottom: 1px solid silver;
}
解決方案5
0 2020-01-23 12:22:16
在table上添加align="right"
<table class="mytable" align="right">
table, th, td { border-collapse: collapse; border: 1px solid black; } .mytable { clear: both; } .mysortdiv { float: right; }
<div class="mysortdiv"> <div>Sort</div> <select> <option value="1">First sort option</option> <option value="2">Second sort option</option> </select> </div> <table class="mytable" align="right"> <thead> <tr> <th>My first column</th> <th>My second column</th> </tr> </thead> <tbody> <tr> <td>Something 1</td> <td>Other thing 1</td> </tr> <tr> <td>Something 2</td> <td>Other thing 2</td> </tr> </tbody> </table>
解決方案6
0 2020-01-23 12:54:05
您可以使用flexbox實現這flexbox無需使用float
table, th, td { border-collapse: collapse; border: 1px solid black; } .mytable { clear: both; } .mysortdiv { margin-bottom:10px; } .parent { display: flex; flex-direction: column; align-items: flex-end; }
<div class="parent"> <div class="mysortdiv"> <div>Sort</div> <select> <option value="1">First sort option</option> <option value="2">Second sort option</option> </select> </div> <table class="mytable"> <thead> <tr> <th>My first column</th> <th>My second column</th> </tr> </thead> <tbody> <tr> <td>Something 1</td> <td>Other thing 1</td> </tr> <tr> <td>Something 2</td> <td>Other thing 2</td> </tr> </tbody> </table> </div>
如何在DIV中獲得一些按鈕以左對齊，而另一些按鈕以右對齊？
[英]How can I get some buttons to align-left and some to align-right inside a DIV?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.