CODEWITHSUNDEEP
htmlcss
user3428231
user3428231

Reputation: 25

How to Indent using HTML or CSS

I am wondering how can I indent using HTML and CSS doing something sort of like this.

Time:      5pm
Address:   Washington
Location:  Cafe

Basically I want to have the information align, try using list but that didn't work.

Thanks in advance.

Upvotes: 2

Views: 160

Answers (3)

blurfus
blurfus

Reputation: 14031

Use tables for tabular data. If, however, you just want to align a few elements as table (i.e. row/columns), you can adjust your div, p, or span tags (or whatever else) to display in tabular format.

See Demo

UPDATED based on comments

HTML

<div id="tabled">
    <p>
        <span class="left">Date:</span><span>today</span>
    </p>
    <p>
        <span class="left">Address:</span><span>today</span>
    </p>
    <p>
        <span class="left">Location:</span><span>today</span>
    </p>
</div>

CSS

#tabled {
    display: table;
    text-align: left;
}

#tabled span {
    display: table-cell;
    min-width: 4em; /* arbitrary width; adjust as necessary */
}

#tabled span.left {
    text-align: left;
}

Upvotes: -1

impiix
impiix

Reputation: 46

you can use spans with display 'inline-block' value and some fixed width, like:

<style type="text/css">
.fixed-length{
   display:inline-block;
   width:100px;
}
</style>
<span class="fixed-length">something</span>

Upvotes: -1

user3817050
user3817050

Reputation:

Try using a table. I'm not sure if you really want to do that, but from my knowledge it will serve what you need to do. Here's a simple table for you to use:

<table width="100%" border="0">
  <tr>
    <td>Time:</td>
    <td>Yes</td>
  </tr>
  <tr>
    <td>Date:</td>
    <td>No?</td>
  </tr>
  <tr>
    <td>Bilbo:</td>
    <td>Baggins</td>
  </tr>
</table>

Edit: Use CSS, and HTML properties to set the table how you want. I suggest just adjusting the entire width of the table to how you want it, etc etc.

Upvotes: 3

Related Questions