View Full Version : CSS to set UL LI Inline-Block

01-08-2013, 09:11 PM
I cannot seem to set my UL LI to be inline?!

here is my HTML:

<ul class="3products">
<li><a href="#" title="pic1"><img src="images/pic1.jpg" alt="pic1" /></a></li>
<li><a href="#" title="pic2"><img src="images/pic2.jpg" alt="pic2" /></a></li>
<li class="last"><a href="#" title="pic3"><img src="images/pic3.jpg" alt="pic3" /></a></li>

here is my CSS

#main .3products {width:948px; height:227px;}
#main .3products li { width:308px; height:227px; display: inline-block; margin-right:8px; }
#main .3products li.last { margin-right:0px; }

and here is the site:


What am I doing wrong?

Please help?

01-08-2013, 09:41 PM
Hello jarv,
Pretty sure .3products is invalid. http://webdesign.about.com/cs/css/qt/tipcssidnames.htm

Try .threeProducts instead maybe.

See the links in my signature about validating.

01-08-2013, 09:58 PM
I dropped the .3products also and the display: inline-block; in favor of display: inline;. This is what I used:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<style type="text/css">
#main li { width:308px; height:227px;margin-right:8px;display:inline;}
#main li.last { margin-right:0px; }

<div id="main">
<ul class="3products">
<li><a href="#" title="pic1"><img src="images/pic1.jpg" alt="pic1"></a></li>
<li><a href="#" title="pic2"><img src="images/pic2.jpg" alt="pic2"></a></li>
<li class="last"><a href="#" title="pic3"><img src="images/pic3.jpg" alt="pic3"></a></li>

01-08-2013, 10:29 PM