复刻谷歌搜索页时无法单独移动提交按钮的问题求助

问题出在<input>元素默认是**行内块（inline-block）**布局，所以搜索框和提交按钮会挤在同一行，单独给按钮加margin-top只会带动整个行下移，没法实现换行效果。你可以用以下两种简单方式解决：

方法1：让提交按钮独占一行 #

给提交按钮设置display: block，强制它占满一行，再通过margin调整位置和居中：

input[type="submit"] {
    display: block;
    margin: 15px auto 0; /* 上下间距15px，左右自动居中 */
}

方法2：用Flex布局实现垂直排列 #

给表单添加Flex布局，指定垂直方向排列，还能轻松控制元素间的间距：

form {
    display: flex;
    flex-direction: column;
    align-items: center; /* 让元素水平居中 */
    gap: 15px; /* 搜索框和按钮之间的间距 */
}

这种方式更灵活，后续调整布局时更方便。

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Search</title>
        <style>
            #search {
                border-radius: 25px;
                width: 400px;
                height: 40px;
                padding: 5px;
            }
            li {
                margin-left: 1000px;
            }
            /* 采用Flex布局方案 */
            form {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 15px;
            }
            .search-container {
                margin-top: 225px; /* 把顶部间距移到容器上，避免影响单个输入框 */
            }
        </style>
    </head>
    <body>
        <div>
            <ul>
                <li><a href="">Google Image Search</a></li>
                <li><a href="">Google Advanced Search</a></li>
            </ul>
        </div>
       <div class="search-container">
            <center> 
                <form action="https://www.google.com/search">
                    <input id="search" type="text" name="q">
                    <input type="submit" value="Google Search">
                </form>
            </center>
       </div>  
    </body>
</html>

另外补充：原来把margin-top:225px加在搜索框上，会导致搜索框和按钮整体下移，现在移到外层的.search-container容器上，布局逻辑更清晰。

内容的提问来源于stack exchange，提问作者Cesare Vertolo