Question

我有以下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 {
    display: inline;
    list-style: none;
    margin: 0px 7px;
}
li a {
    text-decoration: none;
}

我是为我的导航栏做的。这种风格很好地按以下顺序定位我的链接：

主页关于我们服务......

它们都是内联的，因为li html标签被设计为内联元素。现在，如果我改变achor syle，就像这样：

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

我将锚定为块元素。突然，我的链接看起来像这样：

主

关于我们

服务

...

它们被线式制动器分开。但是每个锚都包含在li元素中，这是在线制作的。你知道为什么会这样吗？

Answer 1

您添加了display: block;正在创建问题

试试这个

display: inline; OR

display: inline- block;

看here。

Answer 2

显示块的默认宽度为100％。

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

您可以指定较小的一个，我假设您希望它向左浮动。

Html锚定奇怪的行为

2 个答案: