Question

我是网络开发人员的新手，我仍在学习CSS的界限。我发现谷歌搜索还没有帮助我的一件事，想知道这里是否有人可以帮助我。

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

Answer 1

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

我的解决方案也使用：

width: calc(100% - 200px);

所以可能想检查兼容性。

Answer 2

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

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宽度％以匹配列表项的数量。

如果这不是你想要的，我很抱歉，你的描述很难说清楚。

是否可以计算自动宽度的百分比？

2 个答案: