响应式搜索表单

本文介绍了响应式搜索表单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 我有一个搜索表单，如下所示：I have a Search Form as follows:<form method="get" action="#"> <input type="search" /> <input type="submit" value="Search"/></form>我想要两个输入的组合填充100％...I would like the combination of the two inputs to fill 100% ...提交输入必须有固定宽度。因此搜索输入必须填充剩余的空间。The submit input must have fixed width. So the search input must fill the rest of the space.我想让表单回应...I would like the form to be responsive ...我在这里创建了一个示例： http://codepen.io/mdmoura/pen/jiHkoI created an example here: http://codepen.io/mdmoura/pen/jiHko我可以帮助解决这个问题吗？Can I have some help in solving this?谢谢你， MiguelThank you,Miguel所有你需要的是： 解决方案推荐答案 / p>All you need is: 通过 width：100％; 使搜索输入占用父级的100％宽度> c>将两个输入 inline-block 将它们放在一起，添加 white-space：nowrap; / code>属性到形式元素，所以按钮不会去到下一行。 将 padding 属性添加到 form 元素等于按钮的宽度make the search input occupy 100% width of the parent by width: 100%;make both inputs inline-block to have them together, add white-space: nowrap; property to the form element so the button would not go to the next line. (right now the button will stick out of the form to the distance of its width.)add the padding property to the form element equal to the width of the button获取类似的内容。我还添加了 box-sizing 属性，因此视觉上，表单将根据需要占用40％，并通过将它们放在一行上来删除输入之间的实际空白。如果你有一个小差距。还有打击它的方法。I also added box-sizing property so visually the form will occupy 40% as needed and removed the actual white space between the inputs by putting them together on one line. If you have a small gap there. There are ways to fight it too. 这篇关于响应式搜索表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！