html - li内的一些div正在破坏所有内容

nav {
border-bottom: 4px solid #888;
}

nav ul {
    margin: 0;
    padding: 0;
    border: 0;
    list-style-type: none;
    background-color: #fff;
}

    nav ul li {
        display: inline;
    }

        nav ul a {
            text-decoration: none;
            color: #000;
        }

            nav ul li a span {
                margin-bottom: 20em;
            }

            .menuStrap {
                background-color: #000;
                height: 5px;
            }
   <nav>
        <ul>
            <a href="#">
                <li>
                    <span>Something</span>
                   <div class="menuStrap"></div>
                </li>
            </a>
            <a href="#">
                <li>
                    <span>Somethinga</span>
                </li>
            </a>
            <a href="#">
                <li>
                    <span>Somethinge</span>
                </li>
            </a>
            <a href="#">
                <li>
                    <span>Somethingi</span>
                </li>
            </a>
        </ul>
    </nav>

就像这里：https://jsfiddle.net/nnhfqL2L/

我希望LI内的黑色div响应地与其内部的宽度相同。换句话说，它的宽度应与“某些东西”文本的宽度相同，并且不要破坏其他内容，但不应该破坏内联。

我还有一个疑问，如果您能回答我会很高兴！：
为什么margin不能在ul的任何元素的底部和顶部起作用？有没有办法做到这一点？谢谢！

最佳答案

<a>元素不是<ul>的合法子元素。而是将链接移到<li>内部。

此外，<li>具有display: inline，当其中嵌套有子代时，肯定会导致不同类型的问题。将其设置为block或inline-block。

最后，margin不应应用于inline元素。其中包括<span>。它也不应应用于子项，而应放在要在其间有沟纹的兄弟元素上，在本例中为<li>。

关于html - li内的一些div正在破坏所有内容，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32866067/