如何将div与表格右对齐？

Question

我有一个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>

Answer 1

您可以将它包装在div中吗？然后将每个div设置为向右浮动！

Answer 2

在align="right"上添加table

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

Answer 3

在表格中使用CSS float: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>

Answer 4

这里是可能的解决方法-

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

如何将div与表格右对齐？

问题描述投票：0回答：4

4个回答

最新问题

如何将div与表格右对齐？

问题描述 投票：0回答：4

4个回答

最新问题

问题描述投票：0回答：4