Как сделать гибкое горизонтальное правило

Question

Я пытаюсь настроить этот час так, чтобы он мог отображаться на мобильном телефоне в одной строке.Этот код подходит для просмотра на рабочем столе, но для мобильного устройства он создает переход к линии, которая ломает час.

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

Ваша оценка 20 пикселей для ширины ВМЕСТЕ была выходом из положения. Ниже я использовал 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>

Answer 2

Вариант первый: используйте одну полную ширину (или, может быть, что-то вроде 90%?)

---

, но переместите TOGETHER вверх, чтобы она находилась сверху.

Вариант два: Используйте calc в вашем CSS, так что ширина каждого

---

равна (ширина родителя - ширина ВМЕСТЕ) / 2

(Гадание на ширине 30% слишком хрупко в этом случае).