Question

我正在创建我的第一个响应式网站。我在一个水平居中的容器内有一个导航栏。一切都有一个百分比的大小（有这个术语？）。当我正确调整窗口大小时，导航栏会缩小。但我的最后一个列表项（导航栏项）将向下移动。

我已经尝试过使用最小宽度的东西，我知道它与此有关。但互联网上的所有解决方案都说我应该给导航栏（或ul？）一个固定宽度（xxxx px）。这是我不想要的，因为我希望它能够完全扩展。

HTML：

<body>
<div id="container">
<nav>
    <ul>
        <li><span class="navbaritem">Test1</span></li>
        <li><span class="navbaritem">Test2</span></li>
        <li><span class="navbaritem">Test3</span></li>
        <li><span class="navbaritem">Test4</span></li>
        <li><span class="navbaritem">Test5</span></li>
    </ul>
</nav>
</div>
</body>

CSS：

    @charset "utf-8";
/* CSS Document */

html
{
        width:100%;
    height:100%;
}
body
{
    background-image:url(images/background.png);
    background-repeat:repeat;
    min-height:100%;
    margin:0px;
    overflow: auto;
}
#container
{
    height:100%;
    width:73.20%;
    background-color:#00CC00;
    margin: auto;
    left:0; right:0;
    top:0; bottom:0;
    position:absolute;
}
#navbar
{
    min-width:100%;
    min-height:13.28125%;
    position:absolute;
    background-color:#FF0000;
}
nav {
    position:relative;
    background-color:#FF0000;
    color: #888;
    display: block;
    width:100%;
    height:13.28125%;
}
nav ul
{
    list-style-type:none;
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}
nav li
{
    display: table;
    float:left;
    border-style: solid;
    border-width: 1px;
    border-color:#333;
    width:20%;
    height:100%;
    text-align:center;
    box-sizing:border-box;
}
.navbaritem
{
    font-family: Cambria;
    color:#CCCCCC;
    font-size:36px;
    display: table-cell;
    vertical-align: middle;
}

Answer 1

您可以将菜单项的宽度更改为20％并应用box-sizing:border-box。您的问题是由于px的边框尺寸与%的宽度混合时屏幕尺寸较小时宽度不足。

See the fiddle

调整

1 个答案: