We help IT Professionals succeed at work.

UL / LI tag should display as paragraph - by using css

651 Views
Last Modified: 2013-11-19
What is the style to make this output

<ul>
<li >Item 1</li>
<li >Item 2</li>
<li >Item 3</li>
<li >Item 4</li>
<ul>

looks like this Item 1 | Item 2 | Item 3 | Item 4
Comment
Watch Question

CERTIFIED EXPERT

Commented:
Do you like something like the code snippet?

Later you can play with paddings, margins etc.

And, important: there is an elegant solution using first-child pseudoclass, but it doesn't work in IE :-((

<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<title>inline list - example</title>
 
<style>
ul {
	list-style-type: none;
}
li {
	display: inline;
	border-left: solid blue 1px;
	padding-left: 5px;
}
li.first {
	border-left:none;
}
</style>
 
</head>
 
<body>
  <ul>
	<li class="first">Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 4</li>
  </ul>
</body>
 
</html>

Open in new window

This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
Still doesn't add the vertical bar | separator.  If you want that bar, why even put it in a
  • array at all?
  • Just put it in a javascript function --
  • function(showList) {
  • var list = new array()
  • list[0] = "item1"
  • list[1] = "item2"
  • list[2] = "item3"
  • list[3] = "item 4";
  • var final_list = list.split(' | ');
  • document.getElementById('listing').innerHTML=final_list;
  • }
  • Then in the HTML you will have a SPAN tag --
  • the list goes here
  • To load the list, use   as the main body tag.  This gets you want you want
here is the complete code, without parts deleted by this new EE input box that deletes HTML tags --

function(showList) {
var list = new array()
list[0] = "item1"
list[1] = "item2"
list[2] = "item3"
list[3] = "item 4";
var final_list = list.split(' | ');
document.getElementById('listing').innerHTML=final_list;
}
 
Then in the HTML you will have a SPAN tag --
 
<SPAN id="listing">the list goes here</SPAN>
 
To load the list, use <BODY onLoad="showList();">  as the main body tag.  This gets you want you want

Open in new window

CERTIFIED EXPERT

Commented:
scrahcyboy & tomaugerdotcom,

the solution with li+li is elegant (as the solution with pseudo-class first-child is), and it works in IE7. The only "problem", which tomaugerdotcom has not mentioned, is that DOCTYPE at the beginning of the document is needed (for an example see code snippet).

But... it doesn't work in IE6. When we know that many users still have IE6, where these features are not supported at all, the situation is even worse :-((


scrathcyboy,

why should JavaScript be used? With your solution text is "hidden" in the function and maintenance of the page is more complicated than in pure HTML+CSS solution. I don't see any advantages of your solution...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
...
</head>
<body>
...
</body>
</html> 

Open in new window

@brundo: good call on the IE6 compatibility issue. I usually do a bit of a workaround like this:
ul { style as listed above }
ul li { border-left:1px solid black; display:inline; padding:0 5px; } /* this works for all browsers */
ul > li { border:none; } /* this only works in Moz and IE7, so IE6 will still have all borders */
ul li + li { border-left:1px solid black; } /* this only works in Moz and IE7, so they get their borders back */

It's a bit of a compromise, as in IE6 you'll have a left border on the first menu item as well as the others. So I guess it's up to tv4free whether this is a major concern. I'm not convinced that there are so many IE6 users out there, but I agree that you want to make sure you're as backward-compatible as possible.

@s-boy: I totally agreen with Brundo here - why would you suggest a JavaScript solution when CSS will work great? Now all of a sudden you're building a list at runtime that Google and other search engines will not be able to traverse or index. Add the presumed requirement of nesting anchor tags in there so that this will be a working menu rather than a pretty graphical item and the complexity of your JS solution just rises. Keep the JS to a minimum and only use it for non-critical visual/interactive enhancements that do not interefere with the semantic markup. Google "unobtrusive javascript" if you want to start writing standards-compliant javascript code. It will make you a better programmer.

Commented:
One size fits all, instead of trying to distinguish which is the first list-item, why not give them all a border and sweep the border of the first list-item 'under the rug'.

Simply giving the lot a negative margin-left equal to the size of the border and giving the list an overflow: hidden and presto, one solution fits all. Although, I do assume the use of a valid doctype, I dare predict this one to work without a Doctype as well.

In all fairness, this solution sweeps all the borders under the rug of the previous list-item, so if you need a background-color or such you'd need to set a positive margin-right equal to the border-size to make sure the other borders remain visible...
ul {
	margin: 0;
	padding: 0;
	list-style: none;
	overflow: hidden;
	zoom: 1; /*Float-resize fix for IE6 and below*/
}
 
li {
	float: left;
	margin-left: -1px;
	border-left: 1px solid black;
	padding: 0.5em;
}

Open in new window

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.