Html 如何更改搜索框的宽度/高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32356947/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to Change The Width/Height Of A Search Box
提问by AnotherProgrammer
I'm having trouble with this form I was creating. I started working on a old project and decided to start fresh and scrap the code. The project was a recreation of the Google homepage design. I wanted to have an exact design, except for some things which aren't really needed. The search box (form) moved right where I wanted, but because of the new logo, I had to place my search box on the hand during the animation. The problem is that my coordinates are how I wanted it, but the height and width won't change. This is my whole entire code:
我在创建这个表单时遇到了问题。我开始在一个旧项目上工作，并决定重新开始并废弃代码。该项目是对谷歌主页设计的再创造。我想要一个精确的设计，除了一些并不真正需要的东西。搜索框（表单）移动到了我想要的位置，但是由于有了新的标志，我不得不在动画过程中将搜索框放在手上。问题是我的坐标是我想要的，但高度和宽度不会改变。这是我的整个代码：
<!DOCTYPE HTML>
<HTML>
<head>
<title>Google</title>
<style>
.GoogleLogo {
position:absolute;
TOP:125px;
LEFT:575px;
}
.SearchBar {
position: absolute;
top: 355px;
left: 575px;
height: 30px;
width: 50px;
}
</style>
</head>
<body>
<div class="GoogleLogo">
<a href="https://www.google.com/?gws_rd=ssl#q=Google+logo+history&hl=en&oi=ddle"><img src="../../Pictures/Google2.gif" alt="Google" width="400" height="231" border="0" /></a>
</div>
<div class="SearchBar">
<form>
<input type="text" placeholder="Search..." required>
</form>
</div>
</body>
</HTML>
Is there a way to change the height and width without 'damaging' anything. I want the class, .SearchBar, to respond to my coding of which I changed the height and width. I changed it to 550 pixels, and it still doesn't work, thank you for taking the time to read this.
有没有办法在不“损坏”任何东西的情况下改变高度和宽度。我希望班级.SearchBar响应我更改了高度和宽度的编码。我把它改成550像素了，还是不行，谢谢你花时间阅读本文。
回答by Ryan Kinal
In order to change the with of the actual input element, you need to, well... change the width of the actual input element. You've changed the div, but not the input.
为了更改实际输入元素的宽度，您需要……更改实际输入元素的宽度。您已更改 div，但未更改输入。
.SearchBar {
position: absolute;
top: 355px;
left: 575px;
}
.SearchBar input {
height: 30px;
width: 50px;
}
