Question

我正在尝试将所有<li>元素的宽度设置为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

您需要让li display: 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

首先，我建议你将锚标签放在li标签内，而不是另外做，因为它不是有效的HTML。所以它应该看起来像

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

对于你的宽度问题，只需从类中删除显示内联，因为你已经使它成为内联元素，它没有取宽度。如果你想将这些li水平对齐，你可以在你的类中使用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;
    }

Answer 3

只是，更改display: inline-block，它会使内联并阻止你的宽度

li内联的css宽度不起作用

3 个答案: