Forum Moderators: not2easy
<ul>
<li><a href="lnk.html">Alexandria: 703-461-0040</a></li>
<li><a href="link.html?club=1">Ashburn: 703-726-0036</span></a></li>
</ul>
I would like to be able to include a telephone number after each city name, but want to format the # so it aligns differently then the city name (to the right).
Something like this:
<li>This City Phone Number</li>
<li>Another City Phone Number</li>
<li>Big City Phone Number</li>
I would like all the phone numbers to align (left) to the same spot. I thought about doing a table with two columns but would rather not go this route.
How about a <dl>? I've put borders around the <dt> and the <dd> to examplify. The only adjustment that might be a factor is the need to establish a width to the <dt>, which will need to sufficient to contain the city containing the largest number of characters.. If you can live with that, then this should be fine. Debatable if a list is the best way to go, but not enough specific information to the application to say for sure.
<body>
<head>
<style>
dl {
clear: left; font-size: 1.1em;
}
dl, dt, dd {
margin: 0; padding: 0;
}
dt {
width: 10em;
}
dt, dd {
float: left; border: .1em solid red;
}
dt {
border: .1em solid blue!important;
}
</style>
</head>
<body>
<dl>
<dt>
This city.
</dt>
<dd>
703.461.0040
</dd>
</dl>
<dl>
<dt>
Another city.
</dt>
<dd>
703.726.0036
</dd>
</dl>
<dl>
<dt>
Big Humongous City.
</dt>
<dd>
Phone number.
</dd>
</dl>
</body>
