CODEWITHSUNDEEP
htmlcss
ericky rasul
ericky rasul

Reputation: 11

css width on li inline not working

I'm trying to make the width of all the <li> elements 200px wide but it seems to be taking the exact width of the text.

 #m_home_main_links li {
   display: inline;
   list-style-type: none;
   margin: 1%;
   text-align: center;
   background-color: orange;
   color: #198eff;
   width: 200px;
 }
<div id="m_home_main_links">
  <ul>
    <a href="/">
      <li>mp3</li>
    </a>
    <a href="/">
      <li>videos</li>
    </a>
    <a href="/">
      <li>categories</li>
    </a>
  </ul>
</div>

Upvotes: 1

Views: 3173

Answers (3)

Novice
Novice

Reputation: 478

first of all I would suggest you to place the anchor tag inside of the li tag instead of doing it the other way as it is not valid HTML.So it should look like 

 <ul>
    <li><a href="/">mp3</a></li>
    <li><a href="/">videos</a></li>
    <li><a href="/">categories</a></li>
</ul>

For your width issue just remove the display inline from your class since you have made it an inline element it is not taking width.And if you want to place these li horizontally aligned you can use float left in your class. This is the final css 

#m_home_main_links li {
        float:left;
        list-style-type: none;
        margin: 1%;
        text-align: center;
        background-color: orange;
        color: #198eff;
        width: 200px;
    }

Upvotes: 2

dEsta88
dEsta88

Reputation: 119

just, change display: inline-block and it will make keep inline and block your width li

Upvotes: 0

dfsq
dfsq

Reputation: 193261

You need to make li display: inline-block for them to respect width setting and still behave like inline element:

#m_home_main_links li {
    display: inline-block;
    list-style-type: none;
    margin: 1%;
    text-align: center;
    background-color: orange;
    color: #198eff;
    width: 200px;
}

Upvotes: 5

Related Questions