Lining up 2 wrapped elements inside a li (to perfection)

HTML & CSS
1

I often make long lists that have two elements in them: date & title.
Both elements are already wrapped and could look like this:

<ul>
<li><span>12.05.15</span><a href="http://site.com">Article Title</a></li>
<li><span>01.07.16</span><a href="http://site.org">Blog Title</a></li>
</ul>

If I use a monospaced font for the dates, I can give the span some padding-right, use margin-left and text-indent just right and everything seems to always line up pixel-perfect across devices.

However, I’m wondering if this is possible when not using a monospaced font for the dates? As you can see in the image, my usual technique then fails (more or less, depending on the spacing of the dates).

Is there a way I can perfectly line up the text titles (even when breaking) without using a table? Since both are already wrapped anyway, maybe there’s an obvious positioning technique I’m unfamiliar with. Or if I find one, I might spend 2 days and discover gotchas later… :frowning:

Thanks for looking! :slight_smile:

2

Here’s one easy way.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
ul {
	display:table;
	list-style:none;
	margin:0 auto;
	padding:0;
	width:100%;
	max-width:960px;
}
li {
	display:table-row
}
li span, li a {
	display:table-cell;
	vertical-align:top;
	padding:0 10px 5px 0;
}
li span{width:1%}/* shrink cell to content width  */
</style>
</head>

<body>
<ul>
  <li><span>12.05.15</span><a href="http://site.com">Article Title</a></li>
  <li><span>01.07.16</span><a href="http://site.org">Blog Title</a></li>
</ul>
</body>
</html>
2 Likes
3

Wow, looks credible :slight_smile: TIA Paul!

I’ll get into it and will get back for more thanks & update after I try this today :sunglasses:

4

Another possibility - couldn’t this kind of list also be considered an example of tabular data. If so you could put it into an html table.

1 Like
5

Yes that’s very close to tabular data so semantically a table wouldn’t be that bad (which is effectively what I turned the list into as regards formatting).

The data could probably fit more semantically into a dl element with the date as the data term and the title as the data description but would be awkward to style in the required way.

1 Like
6

Thanks again, Paul. It’s working great! :slight_smile: :slight_smile:


For user feedback, I sometimes give the title a background color. This now highlights the whole cell, which is not always what I prefer. Is it possible to only go as far as the text in the cell?

7

You’d have to wrap the text in a span and give a background colour to the span as display:table-cell will always fit the parent’s width. Even if we removed the width from the table the right cells would always be as long as the longest content in that structure.

8

Thanks. That’s not a huge problem, cos it’s usually from a click and jQuery initiated, so I don’t have to put it on all text beforehand. I’m gonna try that :slight_smile:

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.