HTML / CSS需要帮助在两个元素之间创建下划线[重复]

Posted 2023-03-05

【中文标题】HTML / CSS需要帮助在两个元素之间创建下划线[重复]

【英文标题】：HTML/CSS need help creating an underline between two elements [duplicate]

【发布时间】：2020-01-06 03:44:08

【问题描述】：

我正在建立一个餐厅网站，现在我正在尝试创建营业时间部分。但是，我不知道如何将时间与 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>[phone]</Row>
          </Col>
        </Container>

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

感谢您的帮助。

【问题讨论】：

请显示您尝试的 css 和呈现的 html，否则这个问题太宽泛，不适合 SO

这似乎不是react 问题，而是HTML/CSS 问题。为了帮助您，我们需要您拥有的渲染 HTML 和使用的 CSS

首先你不应该在 Cols 里面有 Rows。应该是行中的列！

【参考方案1】：

我会用 flexbox 解决这个问题，并让 .line 类适应剩余内容的宽度。

如需更多信息，我推荐flexbox guide by css-tricks。

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>

【参考方案2】：

    .index-menu 
    	display: flex;
    	justify-content: space-between;
    
    .index-menu hr 
    	display: inline-block;
    	width: calc(100% - 20px);
    	text-align: center;
    
    .index-menu span 
    	display: inline-flex;
    
    .index-menu span.hours 
    	white-space: nowrap;
    
    .index-menu span.line
    	width: 100%;
    

Try with this code. Hope can help you.

HTML

        <Container className="footer-top">
        <Col className="footer-top-wrapper">
        <Row className="footer-section-title">Opening Hours</Row>
        <Row>
            <div className="index-menu">
                <span>Monday</span>
                <span className="line">
                    <hr></span>
                <span className="hours">6:00 - 3:00</span>
            </div>
        </Row>
        <Row>
            <div className="index-menu">
                <span>Tuesday</span>
                <span className="line">
                    <hr></span>
                <span className="hours">6:00 - 8:00</span>
            </div>
        </Row>
        <Row>
            <div className="index-menu">
                <span>Wednesday</span>
                <span className="line">
                    <hr></span>
                <span className="hours">6:00 - 8:00</span>
            </div>
        </Row>
        <Row>
            <div className="index-menu">
                <span>Thursday</span>
                <span className="line">
                    <hr></span>
                <span className="hours">6:00 - 8:00</span>
            </div>
        </Row>
        <Row>
            <div className="index-menu">
                <span>Friday</span>
                <span className="line">
                    <hr></span>
                <span className="hours">6:00 - 8:00</span>
            </div>
        </Row>
        <Row>
            <div className="index-menu">
                <span>Saturday</span>
                <span className="line">
                    <hr></span>
                <span className="hours">6:00 - 8:00</span>
            </div>
        </Row>
        <Row>
            <div className="index-menu">
                <span>Sunday</span>
                <span className="line">
                    <hr></span>
                <span className="hours">6:00 - 3:00</span>
            </div>
        </Row>
        </Col>
        <Col className="footer-top-wrapper">
        <Row className="footer-section-title">CONTACT US</Row>
        <Row>[phone]</Row>
        </Col>
    </Container>


 

【参考方案3】：

这是你想要做的吗？制作一个 flex 容器并在 line 类使用底部边框。 希望对你有帮助

.line 
  width: 20vw;
  border-bottom: 1px solid black;

.row 
  display: flex;

.day 
  width: auto;

<Container class="footer-top">
  <Col class="footer-top-wrapper">
  <Row class="footer-section-title">Opening Hours</Row>
  <br>
  <Row class="row">
    <span class="day">Monday</span>
    <span class="line"></span>
    <span class="hours">6:00 - 3:00</span>
  </Row><br>
  <Row class="row">
    <span class="day">Tuesday</span>
    <span class="line"></span>
    <span class="hours">6:00 - 8:00</span>
  </Row>
  <br> 
  <Row class="row">
    <span class="day">Wednesday</span>
    <span class="line"></span>
    <span class="hours">6:00 - 8:00</span>
  </Row>
  <br>
  <Row class="row">
    <span class="day">Thursday</span>
    <span class="line"></span>
    <span class="hours">6:00 - 8:00</span>
  </Row>
  <br>
  <Row class="row">
    <span class="day">Friday</span>
    <span class="line"></span>
    <span class="hours">6:00 - 8:00</span>
  </Row>
  <br>
  <Row class="row">
    <span class="day">Saturday</span>
    <span class="line"></span>
    <span class="hours">6:00 - 8:00</span>
  </Row>
  <br>
  <Row class="row">
    <span class="day">Sunday</span>
    <span class="line"></span>
    <span class="hours">6:00 - 3:00</span>
  </Row>
  <br>
  </Col>
  <Col class="footer-top-wrapper">
  <Row class="footer-section-title">CONTACT US</Row>
  <Row>[phone]</Row>
  </Col>
</Container>

【讨论】：

我对reactjs真的不是很了解，但是那不就是全局分配样式吗？意思是，所有行和列都会受到影响吗？如果是这样，这不是一个好习惯.. 有没有办法只针对那个特定的 id 或类......在 css 上，它只是 .class 或 #id，但不确定它是如何为 reactjs 完成的......跨度>

@Gosi for reactjs，使用className="someclass"指定类。

@Gosi 在 react js 上也有类，所有类都必须更改为类名，它会起作用

@djolf @XxSTREKxX 但是如何调用它们呢？就像在 css 中一样，class="test" 被 .test 调用。如何拨打className="test" ？

@Gosi .test 是一样的。