css - 元素样式为 100% 宽度，占据父元素的 100% 以上

Question

这里我有一个元素，#searchField，它占据了其容器宽度的 80%。它包含元素 #searchInput 和 #mic。

#searchInput 目前的宽度约为 63%。我想要的是它占用其容器的 100%，#searchField 然后使用 css3 的 calc() 我将从中减去 34px 所以 #mic 可以适应。

但是当我将 #searchInput 设置为 width:100%; 时，它占据了 #searchField 的 100% 以上宽度。

如何让 #searchInput 以适当的方式占据 #searchField 的 100% 宽度。为什么 width:100%; 不起作用？

最终我的计划是在 calc(100% - 34px); 处设置 #searchInput 的样式，当支持语音识别时，如果不支持，隐藏 # mic 并只执行 100% 的 #searchField。

这是页面:https://googledrive.com/host/0BwJVaMrY8QdcOUVUWFM4UHFzWms/index.html

Answer 1

刚刚查看了您的代码，发现了一些错误。
要正确执行此操作，请遵循以下几点:

1. 从 form 中删除 position: absolute;
2. 到 form，添加 margin: -16px auto 0;
3. 从 #searchField 中删除 width: 80% 并且您也不需要添加 position: relative 因为您已经将其应用于 form
4. 在 #searchInput 上，padding 应该是 0 0 0 42px 即 padding-left: 42px。不要在右侧提供任何 padding。
5. 现在，您可以在 #searchInput 上使用 width: calc(100% - 34px) 但它现在还不能工作，原因是您已经申请padding-left: 42px 就可以了。因此，您应该添加 34px + 42px，这样总计为 width: calc(100% - 76px)。

希望对您有所帮助。 :)