元素的宽度为100％，占父母的100％以上

Question

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

目前

#searchInput的宽度约为63％。我想要的是它占据其容器的100％，#searchField然后使用css3＆＃39; s calc()我会从中减去34px，因此#mic可以适合。< / p>

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

如何让#searchInput以适当的方式占据#searchField宽度的100％。为什么width:100%;没有工作？

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

以下是页面：https://googledrive.com/host/0BwJVaMrY8QdcOUVUWFM4UHFzWms/index.html

Answer 1

将#searchField设置为position：relative。

Answer 2

只是看看你的代码，发现了一些错误的东西。
要做得对，请遵循以下几点：

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. 现在，您可以在width: calc(100% - 34px)上使用#searchInput，但它尚未成功，原因是，您已对其应用padding-left: 42px。因此，您应该添加34px + 42px，使其总计为width: calc(100% - 76px)。

我希望这会有所帮助。 :)