时间戳

首页 > 解决方案 > HTML/CSS 需要帮助在两个元素之间创建下划线

html - HTML/CSS 需要帮助在两个元素之间创建下划线

问题描述

我正在建立一个餐厅网站，现在我正在尝试创建营业时间部分。但是，我不知道如何将时间与 html/css 完美对齐。

这是我的代码示例：

 <Container className="footer-top">
          <Col className="footer-top-wrapper">
            <Row className="footer-section-title">Opening Hours</Row>
            <Row>
              <span>Monday</span>
              <span className="line"></span>
              <span className="hours">6:00 - 3:00</span>
            </Row>
            <Row>
              <span>Tuesday</span>
              <span className="line"></span>
              <span className="hours">6:00 - 8:00</span>
            </Row>
            <Row>
              <span>Wednesday</span>
              <span className="line"></span>
              <span className="hours">6:00 - 8:00</span>
            </Row>
            <Row>
              <span>Thursday</span>
              <span className="line"></span>
              <span className="hours">6:00 - 8:00</span>
            </Row>
            <Row>
              <span>Friday</span>
              <span className="line"></span>
              <span className="hours">6:00 - 8:00</span>
            </Row>
            <Row>
              <span>Saturday</span>
              <span className="line"></span>
              <span className="hours">6:00 - 8:00</span>
            </Row>
            <Row>
              <span>Sunday</span>
              <span className="line"></span>
              <span className="hours">6:00 - 3:00</span>
            </Row>
          </Col>
          <Col className="footer-top-wrapper">
            <Row className="footer-section-title">CONTACT US</Row>
            <Row>(415) 325-5980</Row>
          </Col>
        </Container>

目标是用下划线创建这样的东西：

在此处输入图像描述

谢谢您的帮助。

标签： htmlcssreactjsreact-bootstrap

解决方案

我会用 flexbox 解决这个问题，并将 .line 类调整为剩余内容的宽度。

有关更多信息，我会推荐css-tricks 的 flexbox 指南。

row {
  display: flex;
}

row span.line {
  flex: 1;
  border-bottom: 1px solid #000;
}
<Row class="footer-section-title">Opening Hours</Row>
<Row>
  <span>Monday</span>
  <span class="line"></span>
  <span class="hours">6:00 - 3:00</span>
</Row>
<Row>
  <span>Tuesday</span>
  <span class="line"></span>
  <span class="hours">6:00 - 8:00</span>
</Row>
<Row>
  <span>Wednesday</span>
  <span class="line"></span>
  <span class="hours">6:00 - 8:00</span>
</Row>
<Row>
  <span>Thursday</span>
  <span class="line"></span>
  <span class="hours">6:00 - 8:00</span>
</Row>
<Row>
  <span>Friday</span>
  <span class="line"></span>
  <span class="hours">6:00 - 8:00</span>
</Row>
<Row>
  <span>Saturday</span>
  <span class="line"></span>
  <span class="hours">6:00 - 8:00</span>
</Row>
<Row>
  <span>Sunday</span>
  <span class="line"></span>
  <span class="hours">6:00 - 3:00</span>
</Row>

推荐阅读