CSS to align LI - html

Question

I have a list of couples (name, value) and I would like to display them vertically aligned as in a table:
aaaaaaaa first_value
bbbb second_value
ccc third_value
ddd fourth_value
Is there a way to do so in HTML/CSS, without using tables (I suppose I should use UL/LI tags in some way)?

Answer 1

Yep. Use a definition list.
<dl>
<dt>aaa</dt>
<dd>111</dd>
<dt>bbb</dt>
<dd>222</dd>
<dt>ccc</dt>
<dd>333</dd>
</dl>
and then
<style>
dl dt { width: 100px; float: left; }
dl dd { margin-bottom: 10px; }
</style>
http://jsfiddle.net/wr6wL/

Answer 2

This looks like a definition list to me:
<dl>
<dt>aaaaaaaa</dt>
<dd>first_value</dd>
<dt>bbbb</dt>
<dd>second_value</dd>
<dt>ccc</dt>
<dd>third_value</dd>
<dt>ddd</dt>
<dd>fourth_value</dd>
</dl>
Some CSS to style it is in a this question.

Answer 3

.name { display: inline-block; width: 100px }
Do consider using a table though if you have tabular data. That's what tables were made for.

Answer 4

You can certainly do it with just CSS, but why not use a table? This is a perfectly valid use of one.
That said, an example with just CSS:
<ul>
<li><div>name</div><div>value</div></li>
</ul>
li {overflow: auto;}
li div {width: 50%; float: left;}

Answer 5

try something like this :
<ul>
<li><span class="fixedWidth">aaaaaaaa</span>first_value
<li><span class="fixedWidth">bbbb</span>second_value
<li><span class="fixedWidth">ccc</span>third_value
<li><span class="fixedWidth">ddd</span>fourth_value
</ul>
in your css add
.fixedWidth { display: inline-block; width: 100px }

Answer 6

You can create a group of div tags that have a table style.
Create your html divs like so:
<div class="div-table">
<div class="div-table-caption">This is a caption</div>
<div class="div-table-row">
<div class="div-table-col">1st Column</div>
<div class="div-table-col">2nd Column</div>
</div>
</div>
Then you can add css styling to get the look you want:
.div-table{display:table; border:1px solid #003399;}
.div-table-caption{display:table-caption; background:#009999;}
.div-table-row{display:table-row;}
.div-table-col{display:table-cell; padding: 5px; border: 1px solid #003399
View this jsFiddle for the end result.

Answer 7

You could do something like this
HTML
<div id="main">
<div class="row">
<p class="cell">aaaaaa</p><p class="cell">first_value</p>
</div>
<div class="row">
<p class="cell">bbbb</p><p class="cell">second_value</p>
</div>
<div class="row">
<p class="cell">ccc</p><p class="cell">third_value</p>
</div>
<div class="row">
<p class="cell">ddd</p><p class="cell">fourth_value</p>
</div>
</div>
CSS
#main{display:table;}
.row{display:table-row;}
.cell{display:table-cell; padding:10px;}
http://jsfiddle.net/jasongennaro/cHhTE/