Question

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响应地与其内部的宽度相同。换句话说，它应该与＆＃34; Something＆＃34;相同的宽度;文字并没有打破其他事情，但它没有，它打破了内联。

如果你能回答我很高兴我还有第二个疑问！：为什么保证金不在ul的任何元素的底部和顶部工作？有没有办法让这种情况发生？谢谢！

Answer 1

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

此外，<li>有display: inline，如果有孩子嵌套在其中，肯定会导致不同类型的问题。请将其设置为block或inline-block。

最后，margin不应该应用于inline个元素。这包括<span>。它也不应该应用于孩子，而是放在你想要排水沟的兄弟元素上，在这种情况下是<li>。

Answer 2

要维持一行中的所有元素，请为您的div css添加display: inline-block。在li周围使用一些包装器也很糟糕。将其更改为ul > li > a > *

Answer 3

根据@Nils Kaspersson

的建议更改标记

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-block;
    border:1px solid red;
}
nav ul a {
    text-decoration:none
}
nav ul li a span {
    margin-bottom: 20em; /* 20em? span is not a block-level element. Margin won't be applied, remove below comment to use margin */
/*display:block; now margin will work after setting span as block*/
}
.menuStrap {
	background:#000;
    height: 5px;
}

<nav>
    <ul>	
		<li>					
			<a href="#">
			<span>Something</span>	
			<div class="menuStrap"></div>
			</a>
		</li>

		<li>					
			<a href="#">
			<span>Something</span>	
			<div class="menuStrap"></div>
			</a>
		</li>
		<li>					
			<a href="#">
			<span>Something</span>	
			<div class="menuStrap"></div>
			</a>
		</li>
		<li>					
			<a href="#">
			<span>Something</span>	
			<div class="menuStrap"></div>
			</a>
		</li>

</ul>
</nav>

Answer 4

您应该尝试将以下元素添加到CSS中：

nav ul li {display:inline-block;}

里面的一些div打破了一切

4 个答案: