Question

我正在创建这个表单时遇到问题。我开始研究一个旧项目，并决定重新开始并废弃代码。该项目是Google主页设计的重新设计。我想要一个精确的设计，除了一些不是真正需要的东西。搜索框（表单）移动到我想要的位置，但由于新徽标，我不得不在动画期间将搜索框放在手上。问题是我的坐标是我想要的，但高度和宽度不会改变。这是我的整个代码：

<!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>

有没有办法改变高度和宽度而不会损坏＆＃39;任何东西。我希望班级.SearchBar能够回应我改变高度和宽度的编码。我将其更改为550像素，但它仍然无法正常工作，感谢您花时间阅读此内容。

Answer 1

为了改变实际输入元素的含义，你需要......改变实际输入元素的宽度。你已经改变了div，但没有改变输入。

.SearchBar {
     position: absolute;
     top: 355px;
     left: 575px;
}

.SearchBar input {
     height: 30px;
     width: 50px;
}

如何更改搜索框的宽度/高度

1 个答案: