Div向右浮动是把我的居中表推到左边。我如何解决这个问题？

Question

table.center {
  margin-left: auto;
  margin-right: auto;
}

.menu {
  margin-top: 220px;
}

.right {
  float: right;
  display: inline;
  margin: 0;
}

<div class="right">
  Contact
</div>

<div class="menu">
  <table class="center">
    <tr>
      <th>Heading</th>
    </tr>
    <tr>
      <td>Stuff</td>
      <td>More Stuff</td>
    </tr>
 </table>
</div>

我正在尝试创建一个网站，在页面中心有一个滚动菜单，这工作很好。我想在网站上添加一个 div在菜单的右侧有联系信息和时间，但div是推到顶部的。table 元素向左移动，使对齐方式混乱。我试着让它 inline但这并没有解决这个问题，而且去掉页边距也没有帮助。

Answer 1

将margin-left和right移到菜单元素上，并添加以下内容 width:fit-content; 到它这样的。

.menu.center {
  margin-left: auto;
  margin-right: auto;
  width:-moz-fit-content;
  width:fit-content;
}

table {
  width:100%;
}

.menu {
  margin-top: 220px;
}

.right {
  float: right;
  display: inline;
  margin: 0;
}

<div class="right">
Contact
</div>



<div class="menu center">
<table>
<tr><th>Heading</th></tr>
  <tr><td>Stuff</td><td>More Stuff</td></tr></table>
</div>

根据你的需求，你可能更喜欢这个，而不是... ... position:absolute 的联系div，因为当窗口太窄而无法容纳它们时，表格不会与之重叠。而且它也不会将表格的宽度强制到一个给定的大小。另一方面，这需要一个非常现代的浏览器来工作。

Answer 2

应用一个百分比的宽度你的表格，也应用一个百分比的左边距，适合这个宽度（而没有右边距）。另外，添加 colspan="2" 至 th 的内容，并将其居中。th 和 td 元素。

table.center {
  width: 40%;
  margin-left: 30%;
}

th {
  text-align: center;
}

td {
  width: 50%;
  text-align: center;
}

.menu {
  margin-top: 220px;
}

.right {
  float: right;
}

<div class="right">
  Contact
</div>

<div class="menu">
  <table class="center">
    <tr>
      <th colspan="2">Heading</th>
    </tr>
    <tr>
      <td>Stuff</td>
      <td>More Stuff</td>
    </tr>
  </table>
</div>

Answer 3

这是因为你的 "右边 "div是浮动的，并且有 "display: inline"。一个可能的解决方法（在其他几个方法中）是将你的 "右 "div绝对放置在一个容器内。请看这个建议。

table.center {
  margin-left: auto;
  margin-right: auto;
  border: 1px solid blue;
}

.menu {
  margin-top: 220px;
}

.right-container {
 position: absolute;
 right: 0;
 width: 60px;
 border: 1px solid red;
}

.right {
  display: relative;
  right: -60px;
  left: 0;
}

<div class="right-container">
<div class="right">
  Contact
</div>
</div>

<div class="menu">
  <table class="center">
    <tr>
      <th>Heading</th>
    </tr>
    <tr>
      <td>Stuff</td>
      <td>More Stuff</td>
    </tr>
 </table>
</div>