Question

with the settings below, the css will do the trick in generate a horizontal menu bar perfectly for me. anyway, I’m doubting to know, according to the third group stylesheet, even if its attribute has been set as block (the anchor tag). why doesn’t it really behave as a block?

Since I learn from most css tutorials that a block is supposed to have a line break before and after the element. but in this case why they (all anchors) has been placed one next to another in the same line. I’m just curious and want to understand.

any explanation would be very much appreciated!

ul {
    list-style-type: none;
    height: 28px;
    width: 100%;
    margin: auto;
} 

li {
    float: left;
}

ul a {

    background-repeat: no-repeat;
    background-position: right;
    padding-right: 10px;
    padding-left: 10px;
    display: block; 
    line-height: 28px;
    text-decoration: none;
    color: #FFFFFF;
}

HTML

<div id="menuBar">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>                     
  </ul>
</div>

Answer 1

You have an <li> that is set to float left. I imagine your anchor tags are within your li tags. remove this rule:

li {
    float: left;
}

And your <a> should be block level. By setting the <li> to float left, you are telling the browser to set a block element to stack against each other instead below one another.