Question

我设法使响应式网站的某些功能正常工作，但在移动某些表方面仍然存在一些问题。由于某些原因，我可以将表移向某些方向，但不能移到顶部等其他方向。对于下表，如果可能的话，我想将其降低，但是即使将！important放在顶部之后，也无法使用。对于第一张图片，我似乎无法将其向右进一步移动，对于第二张图片，我似乎无法将其进一步向下移动。...

Image 1

Image 2

这是第一个问题的表代码

.header2_user_information {
  background-color: #FAEBD7;
  table-layout: fixed;
  width: 110%;
  position: relative;
  right: 20em;
}

<table class="header2_user_information">
  <tr>
    <th colspan="2">User\'s General Information</th>
  </tr>
  <tr>
    <th>First Name:</th><td>Mervin</td>
  </tr>
  <tr>
    <th>Last Name</th><td>Lee</td>
  </tr>
  <tr>
    <th>Email Address:</th><td>piano0011@gmail.com</td>
  </tr>
  <tr>
    <th>User ID:</th><td>piano0011</td>
  </tr>
  <tr>
    <th>Administrator Status:</th><td>None</td>
  </tr>
  <tr>
    <th>Moderator Status:</th><td>None</td>
  </tr>
  <tr>
    <th>Premium Membership Status:</th><td>Member</td>
  </tr>
</table>

第二个与第一个非常相似...

Answer 1

有关于何时可以使用CSS偏移属性的说明。根据FreeCodeCamp：

当元素的位置设置为相对时，它允许您指定CSS在页面正常流程中应如何相对于当前位置移动它。它与left或right以及top或bottom的CSS偏移属性配对。这些参数表示将项目从通常放置的位置移开多少像素，百分比或ems。

您的代码段中有position: relative，但是根据您的问题，您可能在实际代码中忘记了它。或者您已在其他地方覆盖它。（使用浏览器的“检查元素”进行检查。）

.header2_user_information {
  background-color: #FAEBD7;
  position: relative; /* Note this line. It is necessary to use CSS offsets */
  top: 30px;
  left: 2em; /* px, em, percentage or any other value is acceptable */
}

<table class="header2_user_information">
  <tr>
    <th colspan="2">User\'s General Information</th>
  </tr>
  <tr>
    <th>First Name:</th><td>Mervin</td>
  </tr>
  <tr>
    <th>Last Name</th><td>Lee</td>
  </tr>
  <tr>
    <th>Email Address:</th><td>piano0011@gmail.com</td>
  </tr>
  <tr>
    <th>User ID:</th><td>piano0011</td>
  </tr>
  <tr>
    <th>Administrator Status:</th><td>None</td>
  </tr>
  <tr>
    <th>Moderator Status:</th><td>None</td>
  </tr>
  <tr>
    <th>Premium Membership Status:</th><td>Member</td>
  </tr>
</table>

为什么我不能通过定位移动某些桌子？

1 个答案: