Welcome to WebmasterWorld Guest from 54.226.133.245

Forum Moderators: not2easy

Message Too Old, No Replies

Float text at end of Unordered list?

     
8:47 pm on Nov 8, 2011 (gmt 0)

New User

5+ Year Member

joined:Aug 13, 2010
posts: 8
votes: 0


How do I get some text to go at the end of an unordered list instead of the line below?

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
total items...

I'd like to have it display like

1 2 3 total items

instead of

1 2 3
total items
9:28 pm on Nov 8, 2011 (gmt 0)

Junior Member

10+ Year Member

joined:May 28, 2003
posts: 198
votes: 4


There are a number of ways you could do it but I suppose the simplest is to make them both display:inline.

e.g.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.items{
margin:0;
padding:0;
list-style:none;
display:inline;
}
.items li{display:inline}
.total{margin:0;display:inline}
</style>
</head>

<body>
<ul class="items">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<p class="total">total items</p>
</body>
</html>

9:31 pm on Nov 8, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:July 3, 2006
posts: 3123
votes: 0


Or float:left the list-items ?
9:36 pm on Nov 8, 2011 (gmt 0)

New User

5+ Year Member

joined:Aug 13, 2010
posts: 8
votes: 0


Thanks, that fixed it. I had one of my styles wrong. I had .pagination ul { instead of ul.pagination and it wasn't even applying it to my list. Thanks
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members