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

【问题标题】：Is it possible to calculate a percentage of the auto width?是否可以计算自动宽度的百分比？
【发布时间】：2013-09-10 00:13:58
【问题描述】：

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

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

【问题讨论】：

你为什么不试试这个？
我去过，但是不知道怎么输入。尝试作为 calc() 函数。
看看我的小提琴伙伴，然后我们可以再做一些工作
为什么不使用 box-sizing:border-box

标签： css width percentage

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

我的解决方案也使用：

width: calc(100% - 200px);

所以可能想检查兼容性。

【讨论】：