Question

我网站上的导航栏有一个小问题。导航栏创建为带有“a”元素的内联列表。它看起来和工作正常，直到我缩放网站。当我缩放时，列表的元素会折叠成两行。有没有办法让内联列表静态？

谢谢！

以下是代码：

<div id="NavigationDiv">
 <ul id="NavigationList">
    <li><a>Naslovnica</a></li>
    <li><a>Automatizacija</a></li>
    <li><a>Antistatika</a></li>
    <li><a>Machine Vision</a></li>
    <li><a>Steper motori</a></li>
    <li><a>Proizvodi</a></li>
    <li><a>Industrija</a></li>
    <li><a>Zastupstva</a></li>
    <li><a>Mogućnosti</a></li>
    <li><a>Kontakt</a></li>
 </ul>

 <style> 
#NavigationList{margin-top:5px; position:absolute; top:110px;}
ul#NavigationList li{font-family:calibri; font-size:22px; color:white; display:inline; list-style-type:none; padding-right:5px; padding-left:5px;}
ul#NavigationList li a:hover {color: #f9b233;}
</style>

Answer 1

添加空格：nowrap;进入#NavigationList

#NavigationList{margin-top:5px; position:absolute; top:110px; white-space: nowrap;}

Answer 2

试试这个： Demo

#NavigationList {       
    white-space: nowrap;
}

现在即使你缩放也会滚动

Answer 3

您可以像这样修复代码以使容器ul内联块。

 <style>

    * {color: black;}

    #NavigationList {
        margin-top:5px;
        position:absolute;
        top:110px;
        white-space: nowrap;
    }

    ul#NavigationList li {
        font-family:calibri;
        font-size:22px;
        color:white;
        display:inline;
        list-style-type:none;
        padding-right:5px;
        padding-left:5px;
    }

    ul#NavigationList li a:hover {color: #f9b233;}

</style>

希望这能回答你的问题

导航栏，内联显示问题

3 个答案: