Html Question posted in
Some basic documentation can be found here.

Html – how to put the text underneath each other in a css styling

I would like the text of this photo to appear neatly and clearly underneath each other on the page, how do I ensure that I can apply this in the CSS?

I know what to do but I’m stuck. Can someone explain it to me? Thank you in advance!

Tags:

2

Answers


  1. 0

    If you want the Monday, Tuesday, … text to appear as a list, write them as list items (<li>) inside an unordered list (<ul>), or add a line break <br> where you want to push the text to a new line.

    .list {
  list-style: none;
}
    <div>
  <h3>Working Hours</h3>
  <p>
    Monday... <br> Tuesday... <br> Wednesday...
  </p>
</div>

<div>
  <h3>Working Hours</h3>
  <ul class='list'>
    <li>Monday...</li>
    <li>Tuesday...</li>
    <li>Wednesday...</li>
  </ul>
</div>
    Login or Signup to reply.
  2. 0

    Just use a table. It is tabular data

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-12 col-md-6 col-lg-4">
  <h3>Working Hours</h3>
  <div class="table-responsive">
    <table class="table table-bordered text-center">
      <thead>
        <tr>
          <th class="text-uppercase">Day</th>
          <th class="text-uppercase">From</th>
          <th class="text-uppercase">To</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="align-middle">Monday</td>
          <td>8:30 am</td>
          <td>5:00pm</td>
        </tr>
        <tr>
          <td class="align-middle">Tuesday</td>
          <td>8:30 am</td>
          <td>5:00pm</td>
        </tr>
        <tr>
          <td class="align-middle">Wednesday</td>
          <td>8:30 am</td>
          <td>5:00pm</td>
        </tr>
        <tr>
          <td class="align-middle">Thursday</td>
          <td>8:30 am</td>
          <td>5:00pm</td>
        </tr>
        <tr>
          <td class="align-middle">Friday</td>
          <td>8:30 am</td>
          <td>5:00pm</td>
        </tr>
        <tr>
          <td class="align-middle">Saturday</td>
          <td>8:30 am</td>
          <td>5:00pm</td>
        </tr>
        <tr>
          <td class="align-middle">Sunday</td>
          <td>8:30 am</td>
          <td>5:00pm</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search