0

我对 Web 开发很陌生，并且仍在学习 CSS 的边界。我发现了一件事谷歌搜索还没有帮助我，想知道这里是否有人可以帮助我。

我有一个导航栏，我想在页面上伸展，栏内每个项目之间的填充大小/间距相等。当然，当用户改变窗口大小时，填充大小会相应增加/减少。我的导航容器是页面宽度的 100%，但导航本身向右移动（左边距）200 像素，以便为网站的徽标留出空间。我想我可以通过计算（因为有 6 个项目，它们之间有 5 个空格）20% 的网站自动宽度来保持填充准确，这样可以在输入的边距下保持填充的灵活性。这可能吗？我已经看到它可以用 Javascript 完成，但我希望避免这条路线，因为我还没有学习 JS，并且这个网站的截止日期即将到来。预先感谢您的帮助！

4

2 回答 2

0

像这样的伙伴？http://jsfiddle.net/vjT86/

我的解决方案还使用：

width: calc(100% - 200px);

所以可能想检查兼容性。

于 2013-09-06T02:12:13.590 回答
0

如果没有实际的代码示例，很难确切知道您要做什么，但这是我根据您的描述复制/修复您的问题的最佳尝试：

http://jsfiddle.net/EK8tL/

HTML：

<div class="container">
    <div id="title"></div>
    <ul id="nav">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>

CSS：

.container {
    display: table;
    width: 100%;
    height: 100px;
}

#title {
    width: 160px;
    height: inherit;
    display:table-cell;
    background-color:blue;
}

#nav {
    list-style: none;
    height: inherit;
    margin: 0;
    padding: 0;
}

#nav li {
    width: 20%;
    height: inherit;
    background-color: pink;
    float: left;
    margin: 0;

}

如果您使用 display: table，则在（可能）最好只使用一些 javascript 或完全不同地定位事物的情况下，您可以避免使用剩余空间。

在我提供的示例中，标题 div 将保持相同大小，并且导航将缩放以填充其右侧的剩余空间。当然，如果您这样做，您必须手动更改 li width % 以匹配列表项的数量。

如果这不是您要找的东西，我深表歉意，从您的描述中很难分辨。

于 2013-09-06T02:21:00.943 回答