0

I have the following html code:

  <ul>
     <li><a href="#">Home</a></li>
     <li><a href="">About Us</a></li>
     <li><a href="">Services</a></li>
     <li><a href="">Portfolio</a></li>
     <li><a href="">Blog</a></li>
     <li><a href="">Contact</a></li>
   </ul>

And the following styles:

li {
    display: inline;
    list-style: none;
    margin: 0px 7px;
}
li a {
    text-decoration: none;
}

I do it for my navigation bar. This style nicely position my links in the following order:

Home About Us Services ...

They are all inline because of the li html tag which was styled to be inline element. Now if I change achor syle ot be like this:

li a {
    text-decoration: none;
    display: block;
}

I made anchors to be block elements. Suddenly my links will look like this:

Home

About Us

Services

...

They become separated by line brakes. But each anchor was contained in li element, which was made inline. Do you know why this happens?

Rustam Issabekov
  • 3,279
  • 6
  • 24
  • 31
  • This problem is thoroughly discussed [here](http://stackoverflow.com/questions/746531/is-it-wrong-to-change-a-block-element-to-inline-with-css-if-it-contains-another) – Siva Tumma Jan 12 '14 at 06:55

2 Answers2

0

You added display: block; which is creating problem

try this

display: inline; OR

display: inline- block;

Look here.

nrsharma
  • 2,532
  • 3
  • 20
  • 36
  • I know that I added display block. But in each li element there is only one one anchor and li elements are inline so everything suppose to stay on one line – Rustam Issabekov Jan 12 '14 at 06:49
  • Rustam - the li element must be at least as wide as the a element it contains. And your a elements are as wide as the page. – L_Holcombe Jan 12 '14 at 06:55
0

The default width of display block is 100%.

li a {
    text-decoration: none;
    display: block;
    width:100px;
    float:left;
}

You can specify a smaller one and I assume you want it to float left.

Wayne
  • 4,760
  • 1
  • 24
  • 24