How to vertically align parts of HTML list item?

Question

I have the following HTML (which I control):

<ul>
    <li>
        <a href="mailto:email@example.com">email and co: email@example.com</a>
    </li>
    <li>
        <a href="xmpp:xmpp@example.com">XMPP: xmpp@example.com</a>
    </li>
</ul>

This renders like this (I exaggerated the "email & co" text for the problem to be more visible):

* email and co: email@example.com
* XMPP: xmpp@example.com

I would like to render this in a slightly prettier way by aligning both email and XMPP address, more or less like this:

* email and co: email@example.com
* XMPP:         xmpp@example.com

(or something similar).

I tried to play with display: table and friends with no luck: it seems the <a> tag blows everything up :(

This is my current Fiddle: http://jsfiddle.net/xL314Lkt/ with a non-working solution. If I remove the <a> tag, it seems to be OK, but I really need it, and I'm looking for a solution (if possible) which:

• keeps the content semantically correct, or the best kind of correct. (Like, I don't really want to split the <a> in two parts.)
• doesn't set a fixed width to any of the elements, I would the labels to take the same space both BUT also to let them flow naturally (and keeping the visual correct by playing with margins and paddings.) Actually, this whole things render in a not-so-width space, so beside the natural flow, I have to keep things at their minimum.

Answer 1

If you are willing to use javascript you could do:

//retrieve all elements you wish to match width
var labelElement = document.getElementsByClassName("label");
var maxWidth = 0;
var elementWidth;

//Loop through the elements to get the maximum width
for (var i = 0; i < labelElement.length; ++i) {
    elementWidth = parseInt(labelElement[i].offsetWidth);
    maxWidth = elementWidth > maxWidth ? elementWidth : maxWidth;
}

//Set the new width for all elements, +1 to avoid linebreak
for (var i = 0; i < labelElement.length; ++i) {
    labelElement[i].style.width = "" + (maxWidth+1) + "px";
}

JSFiddle

Answer 2

You should use definition list, this is semantically more correct:

<dl>
    <dt>email and co</dt>
    <dd>email@example.com</dd>
    <dt>XMPP</dt>
    <dd>xmpp@example.com</dd>
</dl>

CSS could look like:

dt
{
    float:left;
    clear:both;
    min-width:38em;
}
dd {
    float:left;
}

Answer 3

Your best bet will be to just add a min-width.

<ul>
    <li>
        <a href="mailto:email@example.com">
            <span class="label">email and co:</span>
            <span class="value">email@example.com</span>
        </a>
    </li>
    <li>
        <a href="xmpp:xmpp@example.com">
            <span class="label">XMPP:</span>
            <span class="value">xmpp@example.com</span>
        </a>
    </li>
</ul>

CSS

ul {
    display: table;
}

li {
    display: table-row;
}

span.label,
span.value {
    display: table-cell;
}

.label {
    min-width: 100px;
}

Answer 4

If you are willing to make the label a fixed width:

<ul>
    <li>
        <a href="mailto:email@example.com">
            <label class="listLabel">email and co:</label>
            <span class="listSpan">email@example.com
        </a>
    </li>
    <li>
        <a href="xmpp:xmpp@example.com">
            <label class="listLabel">XMPP:</label>
            <span class="listSpan">xmpp@example.com</span>
        </a>
    </li>
</ul>

Then set your CSS:

.listLabel,
.listSpan {
    display:inline-block;
    vertical-align:top;
}

.listLabel {
    width:100px;
}

This should give the appearance you're looking for.

Answer 5

You need to change the anchor tag's display property to block:

Codepen: http://codepen.io/erquhart/pen/wJcCK

<ul>
    <li>
      <a href="mailto:email@example.com">email and co: <span>email@example.com</span></a>
    </li>
    <li>
      <a href="xmpp:xmpp@example.com">XMPP: <span>xmpp@example.com</span></a>
    </li>
</ul>

a {
  display: block;
  width: 300px;
}

span {
  float: right;
}