Question

我正在尝试实现响应式搜索栏的特定外观，其中我显示搜索输入，选择过滤器选项并在一行中提交按钮。提交按钮并选择分别定义宽度为44px和110px，我希望搜索输入字段占用剩余的可用空间，因此我使用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的盒子模型，因此没有mater边距和填充，宽度总是44px和110px

css calc（）没有产生预期的结果

0 个答案: