Question

我正在尝试修改此小时，以便它可以在移动设备上显示在一行上。此代码适用于桌面视图，但对于移动设备而言，它会创建一个跳至中断hr的行。

div {
  text-align: center;
}

hr {
  display: inline-block;
  width: 30%;
}

<div class="mcnTextContent">
  <table>
    <tbody>
      <tr>
        <td>&nbsp;</td>
      </tr>
    </tbody>
  </table>
  <div style="center">
    <hr>TOGETHER
    <hr>
  </div>
  <table>
    <tbody>
      <tr>
        <td>&nbsp;</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

选项一：使用单个全角（或大约90％的数字？）

，但将TOGETHER向上移动，使其位于顶部。

选项二：在CSS中使用calc，以使每个

的宽度为（父级宽度-TOGETHER的宽度）/ 2

（在这种情况下，猜测宽度为30％太脆弱了。）

Answer 2

您对TOGETHER宽度的20px的估算超出了预期。在下面，我使用了8em，但您可能希望将其调整为另一种方式。

div { text-align: center; } 
hr { display: inline-block; width: calc((100% - 8em)/2); }

<div class="mcnTextContent">
  <table>
    <tbody>
      <tr>
        <td>&nbsp;</td>
      </tr>
    </tbody>
  </table>
  <div style="center">
    <hr>TOGETHER
    <hr>
  </div>
  <table>
    <tbody>
      <tr>
        <td>&nbsp;</td>
      </tr>
    </tbody>
  </table>
</div>

如何制定响应式水平尺

2 个答案: