Question

我正在尝试制作一个包含带有'display：block'标签的菜单，并且似乎在每两个标签之间，至少在Chrome中插入了一个标签。我发现这种行为最奇怪。我该怎么做才能摆脱它们？

代码如下：

<html>
<head>
<style>
.monespace_menu-items a {
text-decoration: none;
padding-top:5px;
width:100%;
color:#D3D3D3;
margin:0;
display:block;
padding-left:5px;
padding-bottom:5px;
}
.monespace_menu-items a:hover {
color:white;
background-color:black;
}
</style>
</head>
<body>

<div class="monespace_menu-items">
    <a href="#">href 1<a/>
    <a href="#">href 2<a/>
    <a href="#">href 3<a/>
</div>

</body>
</html>

这是一个JSFiddle：https://jsfiddle.net/75ybtuv1/2/

感谢任何输入。

谢谢！

Answer 1

像这样的</a>标签，而不像这样的<a/>

      <html>
        <head>
        <style>
        .monespace_menu-items a {
        text-decoration: none;
        padding-top:5px;
        width:100%;
        color:#D3D3D3;
        margin:0;
        display:block;
        padding-left:5px;
        padding-bottom:5px;
        }
        .monespace_menu-items a:hover {
        color:white;
        background-color:black;
        }
        </style>
        </head>
        <body>
    
        <div class="monespace_menu-items">
      <a href="#">href 1</a>
      <a href="#">href 2</a>
      <a href="#">href 3</a>
        </div>
    
        </body>
        </html>

Chrome中<a>标签列表之间添加了额外的<a>标签

1 个答案: