如何使用 CSS 或 Bootstrap 为元素设置绝对边距？

Question

我有几个div 元素，其中每个div 中的某些段落（p）之间有一个table，使用以下代码：

<p style="display: inline-block;">
    Something BEFORE the table
    <table style="display: inline-block;">
        <thead>
            <tr>
                <th>header</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>data</td>
            </tr>
        </tbody>
    </table>
    Something AFTER the table
</p>

这会产生一个看起来像这样的漂亮内容：

                          head
Something BEFORE the table    Something AFTER the table
                          data

但是在每个div 之前和之后都有不同的内容长度 table 使其看起来像这样：

                          head
Something BEFORE the table    Something AFTER the table
                          data
                      head
Short BEFORE the table    Short AFTER the table
                      data
                               head
Something long BEFORE the table    Something long AFTER the table
                               data

我想要的是为每个 table 设置一些“边距”，以便它们与父元素的开头有一定的距离（在这种情况下为 p），因此希望看起来像这样：

                               head
Something BEFORE the table         Something AFTER the table
                               data
                               head
Short BEFORE the table             Short AFTER the table
                               data
                               head
Something long BEFORE the table    Something long AFTER the table
                               data

页面的 BEFORE、table 和 AFTER 元素必须像这样处理，因为将这些元素中的每一个都放在自己的 div 上并将它们并排显示会混淆此页面部分的样式，并且还会产生类似的问题，但现在是垂直的（但是如果您的解决方案需要这样做，请分享...也许我最终会使用它）。

P.D：如果您的解决方案包含 Bootstrap，请使用版本 3。

P.D.2：我很抱歉这些例子看起来很乱，我还在习惯这个。

Answer 1

将其包装在表结构中。这可以通过设置为表格的 div 来完成。这样你就可以让它响应。

！不要再将其他块级元素放入 p 元素中

见：Why is <table> not allowed inside <p>

以下是您需要的 HTML：

.table{
  display: table; 
  widht: 100%; 
}
.row {
  display: table-row;
}
.cell{
  display: table-cell;
  padding: 0 7.5px;
}

<div class='table'>
  <div class='row'>
    <div class='cell'>
      Something BEFORE the table
     </div>
     <div class='cell'>
      <table>
          <thead>
              <tr>
                  <th>header</th>
              </tr>
          </thead>
          <tbody>
              <tr>
                  <td>data</td>
              </tr>
          </tbody>
      </table>
     </div> 
     <div class='cell'>
      Something AFTER the table
      </div>
  </div>

  <div class='row'>
    <div class='cell'>
      Something LONGGGGGG BEFORE the table
     </div>
     <div class='cell'>
      <table>
          <thead>
              <tr>
                  <th>header</th>
              </tr>
          </thead>
          <tbody>
              <tr>
                  <td>data</td>
              </tr>
          </tbody>
      </table>
     </div> 
     <div class='cell'>
      Something AFTER the table
      </div>
  </div>
 </div>

Answer 2

这是一个简单易行的解决方案：

.before-table {
  min-width: 250px;
  display: inline-block;
}

<p style="display: inline-block;">
    <div class="before-table">Something BEFORE the table</div>
    <table style="display: inline-block;">
        <thead>
            <tr>
                <th>header</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>data</td>
            </tr>
        </tbody>
    </table>
    <span>Something AFTER the table</span>
</p>

Answer 3

要设置绝对位置，您可以在要定位的元素上使用position: absolute。它将定位在它的第一个非静态父级的坐标 (0,0)（左上角）。 （默认情况下，每个元素都有一个位置设置为静态，直到您明确地将其设置为其他内容）。所以这意味着您还需要为父级分配一个位置（p 我是你的情况），以便它覆盖默认值。像 position: relative 这样的东西应该可以完成这项工作。

之后，您可以分别使用“上、右、下、左” CSS 属性来设置从父级的上/右/下/左边框开始的自定义位置。

p {
    position: relative;
}

table {
    position: absolute;
    left: 150px; // or whatever distance works best
}

类似的东西，或者等效的内联版本应该做。