'HTML/CSS need help creating an underline between two elements [duplicate]
I am building a restaurant website and right now I am trying to create Opening Hours part. However, I do not know how to align the hours perfectly with html/css.
here is a sample of my code:
<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>The goal is to create something like this with the underline:
Thank you for your help.
Solution 1:[1]
I would solve this with flexbox and adapt the class .line to the width of the remaining content.
For more information I would recommend the 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>Solution 2:[2]
Is this what you are trying to do ? make a flex container and at the line class use border bottom.
Hope it helps
.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>(415) 325-5980</Row>
</Col>
</Container>Solution 3:[3]
Try with this code:
.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%;
} <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>(415) 325-5980</Row>
</Col>
</Container>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | |
| Solution 2 | Amaresh S M |
| Solution 3 | halfer |