1 reply [Last post]
Last seen: 8 years 1 week ago
Timezone: GMT-6
Joined: 2010-12-02
Posts: 1
Points: 2

I've made a horizontal bar of links, and now I want to add a couple of lines of explanation to the right of the links, stacked on top of each other, but still in the bar. This is working fine except for one minor thing: I want both lines of text to start in the same place horizontally so they're both left-aligned. Currently they look like a centered paragraph.

In .explanation I tried using text-align: left but it had no effect.


<div class="bar">
	<ul class="barlist">
		<li><a href="#">1</a></li>
		<li><a href="#">2</a></li>
		<li><a href="#">3</a></li>
		<li><a href="#">4</a></li>
		<li><a href="#">5</a></li>
		<li><a href="#">6</a></li>
		<li><a href="#">7</a></li>
		<li><a href="#">8</a></li>
		<li class="explanation">first line of explanation<br />second line</li>


div .bar {
	border-style: solid; 
	border-color: #000000;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 0px;
	border-right-width: 0px;
	margin: 0px;
	padding: 6px 0px 1px;
	text-indent: 10px;
	width: 596px;
	background-color: #FFFFFF;
	font-family: verdana;
div .bar a {
	color: #000000;
ul .barlist {
	position: relative;
	margin: auto;
	padding: 0;
	list-style-type: none;
li {
	display: inline;
	float: left;
	position: relative;
	top: -25px;
	left: -25px;
	color: #000000;
	padding: 5px;
.explanation {
	font-size: 10px;
	position: relative;
	top: -28px;
	left: -10px;

Deuce's picture
Somewhere, USA
Last seen: 1 year 21 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

Please provide a link or at

Please provide a link or at the very minimum all of your HTML and CSS.

all ยป http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph