Html 奇怪的行为

我有以下html代码：

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

我这样做是为了我的导航栏。此样式按以下顺序很好地定位我的链接：

美国服务主页…

它们都是内联的，因为li html标记的样式是内联元素。现在，如果我改变了achor syle，我会这样做：

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

我将锚定为块元素。突然，我的链接将如下所示：

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

主页

关于我们

服务

…

---

它们被管路制动器分开。但每个锚都包含在li元素中，该元素是内联的。您知道为什么会发生这种情况吗？

您添加了

display:block哪一个产生了问题

试试这个

display: inline; OR

display: inline- block;

查看。
显示块的默认宽度为100%

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

您可以指定一个较小的，我假设您希望它向左浮动。
我知道我添加了显示块。但是在每个li元素中只有一个锚，li元素是内联的，所以假设所有元素都保持在一条线上Rustam-li元素必须至少与它包含的a元素一样宽。你的a元素和页面一样宽。非常感谢你的帮助！这个问题已经被彻底讨论过了