css width on li inline не работает

Question

Я пытаюсь сделать ширину всех элементов размером 200px, но, похоже, занимает точную ширину текста.

#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>

Answer 1

Вам нужно сделать lidisplay: inline-block для них соблюдать ширину настройки и по-прежнему ведут себя как строковый элемент:

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

Answer 2

просто измените display: inline-block и он будет делать держать инлайн и заблокируйте свою ширину li

Answer 3

Прежде всего, я предлагаю вам се якорного тега внутри тега LI а не делать это по-другому, как это не является действительным HTML.So он должен выглядеть

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

Для вашей ширины вопроса просто удалите дисплей встроенный из вашего класса, так как у вас есть сделал его встроенным элементом, который не принимает width.And, если вы хотите разместить эти ли горизонтально выровнены вы можете использовать float влево в вашем классе. Последнее предварительное css

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