CODEWITHSUNDEEP
htmlcss
Md Foysal
Md Foysal

Reputation: 93

Aligning a set of labels and values

I am new in html and css so it is hard to how can I align all semicolon like as screenshot?

PSD look like:

PSD look like

Here is my HTML markup

 <ul>
    <li>Name <span>: John Doe</span></li>
    <li>Age <span>: 30.30.30</span></li>
 </ul>

And This is the CSS

li span {
    padding-left: 20px;
}

And the result is screeshot:

Result of my markup

What will the appropriate markup and css for this?

Upvotes: 0

Views: 211

Answers (6)

rimraf
rimraf

Reputation: 4126

Ok another solution. For kicks

li {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

span {
  width: 400px;
  text-align: left;
}
<ul>
  <li><span>Name</span><span>: John Doe</span></li>
  <li><span>Another Thing</span><span>: John Woe</span></li>
  <li><span>Finally</span><span>: Another last thing</span></li>
</ul>

Upvotes: 0

jesusverma
jesusverma

Reputation: 1745

You can use table here like this:

<tbody class="table" >
    <tr>
      <td>Name</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>Age</td>
      <td>$80</td>
    </tr>
    <tr>
      <td>Job</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>

and in CSS

.table td{
  padding-left: 3em;
}

Hope this demo will help you

Upvotes: 0

Ehsan
Ehsan

Reputation: 12959

Use display:table-row for li and display:table-cell for labels.

li  {
    padding-left: 20px;
    display: table-row;
}  

li label {
  display: table-cell;
}

li label:not(:first-child) {
    padding-left: 40px;
}
 <ul>
    <li><label>Name</label><label>: John Doe</label></li>
    <li><label>Age</label><label>: 30.30.30</label></li>
 </ul>

Upvotes: 2

Malathy Venkatesan
Malathy Venkatesan

Reputation: 213

Hope this will help you

<!DOCTYPE html>
<html>
<head>
<style>
table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

</style>
</head>
<body>

<table>
  <tr>
    <td>Name</td>
    <td>John Doe</td>
  <tr>
    <td>Age</td>
    <td>30.30.30</td>
  </tr>
</table>

</body>
</html>

Upvotes: 0

Naveed Ramzan
Naveed Ramzan

Reputation: 3593

2 ways you can achieve.

use table

<table>
    <tr>
        <td>Name</td>
        <td>: John</td>
    </tr>
</table>

Or if you want to use ul and li

<ul>
    <li><span>Name </span><span>: John Doe</span></li>
    <li><span>Age </span><span>: 30.30.30</span></li>
 </ul>

li span:first-child {
    width: 200px;
}

Upvotes: 0

Sanket Shinde
Sanket Shinde

Reputation: 134

<table>
<tr>
    <td>Name </td><td>: </td><td> John Doe</td>
</tr>
<tr>
    <td>Age </td><td>: </td><td> 30.30.30</td>
</tr>
 </table>

Upvotes: 0

Related Questions