How to set this to inline

HTML & CSS
1

I don’t get this example:

A Ul class is a block lvl element, the example sets it to block. I tried to set it to inline and I could not, where am I noobing out?

2

Try this:



.menu a
{
  display:inline;
  border:1px solid #f90;
  background:#fec;
  padding:4px 10px;
  margin:0 0 1px 0;
  color:#c60;
  text-decoration:none;
  font:normal normal normal 0.8em sans-serif;
}
.menu a:hover,
.menu a:focus,
.menu a:active {  background:#f8fbd0;}
.menu li       { display:inline;   width:7em;}
.menu,
.menu li       { margin:0;  padding:0;  list-style-type:none;}
3

So you added a display property to the decendant selector for the class menu on the element li, along with the a element.

I meant to add a *H to the title of the thread.

So apply inline to all you elements that may natrually display block format?

4
Off Topic:

Corrected.

5

What you want there is for the list items—which normal sit one on top of the other, due to being block level elements—to sit side by side. So it’s the LIs you need to change. I prefer to set them to float: left, but display: inline will do the same. Normally you’d then set the <a>s to display: block, as they then fill up the LIs, but it’s up to you. But there’s no need to set the <a> to display: inline, as that’s their default.