Question

假设以下列表：

<div class="menublock">
        <ul class="menu">
            <li><a href="Default.aspx">Home</a></li>
            <li><a href="http://google.com">Google</a></li>
            <li><a href="http://pornhub.com">Porn Hub</a></li>
            <li><a href="http://www.thestar.com">Toronto Star</a></li>
            <li><a href="http://www.stackoverflow.com">Stack Overflow</a></li>
            <li><a href="http://example.com/">Example Site</a></li>
            <li><a href="http://www.yorku.ca">York University</a></li>
        </ul>

    </div>

使用以下CSS

.menublock .menu {
margin-top: 35px;}

.menublock .menu li {
    display: inline;
    list-style-type: none;
    padding-right: 20px;
}

    .menublock .menu li a {
        font-size: 16pt;
    }

如何阻止列表包装在列表项的中间？也就是说，我希望它能在多伦多之星和＃34;和＃34; Stack Overflow＆＃34; （如有必要），但不在＆＃34; Stack＆＃34;和＆＃34;溢出＆＃34;

换行符应该响应实际的屏幕宽度，而不是强制使用子后选择器或其他此类固定点。

Answer 1

将a代码显示为inline-block

.menublock .menu li a {
    font-size: 16pt;
    display:inline-block;
}

Answer 2

不要让每个列表项显示为“内联”，而是将它们显示为“块”并让它们浮动为“左”。

这可以防止破坏每个项目内的文本。

我倾向于以这种方式制作水平导航栏，因为它消除了这些问题以及内联元素彼此相邻时产生的尴尬间距问题。

编辑：浮动一个元素会自动显示为“阻止”，所以只需删除“display：inline”并让列表项向左浮动。

Answer 3

.menublock .menu li a {
        font-size: 16pt;
        white-space:nowrap;
    }

如何在列表项中阻止水平列表中断？

3 个答案: