- From: Nils Dagsson Moskopp <nils@dieweltistgarnichtso.net>
- Date: Mon, 5 Mar 2012 04:41:06 +0100
Hugh Guiney <hugh.guiney at gmail.com> schrieb am Tue, 10 Jan 2012
02:32:35 -0500:
> [?] my most common problem with <dl>s is styling them, but it's
> hardly CSS's fault. What kind of styling am I attempting to do?
> Mostly, to arrange them in columns.
>
> [?]
>
> I've tried, and as far as I can tell, this can't be achieved with
> floats. Even if it can, it's prohibitively unintuitive enough to
> someone with considerable CSS experience.
FYI, you can abuse relative positioning and negative margins for this
purpose. Two caveats: First, you'll have to know the number of columns
beforehand. Second, particularly long <dt> content that has two lines
can and will mess this up. Still, I consider it pretty straightforward:
<!DOCTYPE html>
<title>Styling <dl> elements as columns</title>
<style>
* { margin: 0; padding: 0; }
body { margin: 3em auto; line-height: 1.5em; width: 34em; }
dl { outline: 1px solid blue; }
dt, dd { float: left; width: 25%; }
dt { outline: 1px dotted red; }
dd { outline: 1px dotted green; position: relative;
margin-left: -25%; top: 1.5em; }
</style>
<dl>
<dt>item
<dd>definition
<dt>another item
<dd>another definition
<dt>yet another item
<dd>yet another definition
<dt>the last item
<dd>the last definition
</dl>
Cheers,
--
Nils Dagsson Moskopp // erlehmann
<http://dieweltistgarnichtso.net>
Received on Sunday, 4 March 2012 19:41:06 UTC