css calc() 未产生预期结果

Question

我正在尝试实现响应式搜索栏的特定外观，我在其中显示搜索输入、select 过滤器选项和一行中的提交按钮。提交按钮和 select 分别定义了 44px 和 110px 的宽度，我希望搜索输入字段占用其余可用 space，因此我使用 width: calc(100% - 154px);。但它没有按预期工作。请在此处查看示例 https://jsfiddle.net/t97fqqxu/

HTML:

<div id="main-search">
    <form>
        <input type="text" placeholder="Search.." />
        <select>
            <option>Option</option>
        </select>
        <input type="submit" value="Submit"/>
    </form>
</div>

CSS

#main-search {
    background-color: @palette-white;
}
#main-search form {
    width: 100%;
    background: green;
}

#main-search input[type="text"] {
    width: calc(100% - 154px);
}

#main-search select {
    width: 110px;
}

#main-search input[type="submit"] {
    text-indent: -9999px;
    width: 44px;
    height: 44px;
}

编辑： 我正在利用 bootstrap 3 的盒模型，因此没有边距和填充，宽度将始终为 44px 和 110px

Answer 1

您没有考虑 input 元素上的 border。默认情况下，border/padding 被添加到元素的 width/height。换句话说，即使你给一个元素宽度110px，你仍然需要考虑元素padding/border.

Updated Example

您可以删除边框，或使用 box-sizing: border-box 来计算元素的 width/height 计算中的 border：

input[type="text"] {
  border: none;
}

或..

input[type="text"] {
  box-sizing: border-box;
}

此外，值得指出的是 inline 个元素 respect the whitespace in the markup，您也需要将其删除。请参阅上面的更新示例。

css calc() 未产生预期结果

css calc() not producing expected result

html

css

calc