作业复刻谷歌首页：如何为同一行的两个按钮添加间距？

我在复刻谷歌首页的作业中，无法正确设置「Google Search」和「I'm Feeling Lucky」两个按钮的格式：

预期效果：

实际效果：

我试过设置margin等属性但没作用，以下是我的代码：

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Search</title>
    <meta charset="utf-8">
    <!-- This link tag is used to link html file with css file -->
    <link rel="stylesheet" href="Styles/styles.css">
</head>
<body>
    <div class="center">
        <center>
            <br>
            <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="Google" width="272" height="92" class="Logo">
            <br>
            <br>
            <form action="https://google.com/search">
                <div class="box">
                    <input maxlength="2048" name="q" type="text" aria-autocomplete="both" aria-haspopup="false" autocapitalize="off" autocomplete="off" autocorrect="off" autofocus role="combobox" spellcheck="false" class="center input">
                    <input type="submit" value="Google Search" hidden>
                </div>
                <section>
                    <div>
                        <button type="submit" class="button">Google Search</button>
                    </div>
                    <div>
                        <button type="submit" class="button">I'm Feeling Lucky</button>
                    </div>
                </section>
            </form>
        </center>
    </div>
</body>

SCSS代码 #

@font-face {
    font-family: "Product Sans";
    font-style: normal;
    font-weight: 400;
    src: local("Open Sans"), local("OpenSans"),
        url(https://fonts.gstatic.com/s/productsans/v5/HYvgU2fE2nRJvZ5JFAumwegdm0LZdjqr5-oayXSOefg.woff2)
            format("woff2");
}
body {
    font-family: Product Sans;
    height: 69.25vh;
}
.center {
    align-items: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
section{
    display: flex;
    margin-top: 2%;
    width: 23%;
    justify-content: space-around;
    margin-bottom: 2%;
    align-items: center;
}
.box {
    width: 580px;
    margin: 0px auto;
    position: relative;
}
.box .input {
    border: 1px solid #ddd;
    color: rgba(0, 0, 0, 0.87);
    font-size: 16px;
    padding: 13px;
    padding-left: 45px;
    border-radius: 25px;
    width: 89.8%;
    transition: box-shadow 100ms;
    outline: none;
}
.input:hover {
    border: 1px solid #fff;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.05), 0 0 2px rgba(0, 0, 0, 0.05),
        0 0 3px rgba(0, 0, 0, 0.05), 0 0 4px rgba(0, 0, 0, 0.05),
        0 0 5px rgba(0, 0, 0, 0.05), 0 0 4px rgba(0, 0, 0, 0.05),
        0 0 5px rgba(0, 0, 0, 0.05);
}
.button {
    background-color: #f8f9fa;
    border-radius: 6px;
    width: 128px;
    height: 36px;
    border: none;
    font-size: 14px;
}
.button:hover {
    border: 2px solid #DADCE0;
    // box-shadow: 0 0 1px rgba(0, 0, 0, 0.05), 0 0 2px rgba(0, 0, 0, 0.05),
    //  0 0 2px rgba(0, 0, 0, 0.05), 0 0 1px rgba(0, 0, 0, 0.05),
    //  0 0 1px rgba(0, 0, 0, 0.05), 0 0 1px rgba(0, 0, 0, 0.05),
    //  0 0 1px rgba(0, 0, 0, 0.05);
}
// 255px x 72px

解决方案 #

问题出在几个细节上，调整后就能匹配预期效果：

1. 去掉section的固定宽度：固定百分比宽度会导致按钮容器随屏幕尺寸变形，改用自适应布局
2. 用间距属性替代space-around：给section设置gap:16px，直接控制两个按钮的间距，排版更精准
3. 按钮改用内边距控制宽度：固定宽度会让不同文字长度的按钮不协调，用padding替代width，同时加min-width保证最小尺寸
4. 修复hover移位问题：给按钮初始设置透明边框，避免hover时元素突然移位

修改后的SCSS关键代码：

section{
    display: flex;
    margin-top: 20px;
    justify-content: center;
    gap: 16px;
    margin-bottom: 20px;
}
.button {
    background-color: #f8f9fa;
    border-radius: 6px;
    padding: 0 16px;
    height: 36px;
    border: 1px solid transparent;
    font-size: 14px;
    cursor: pointer;
}
.button:hover {
    border-color: #dadce0;
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}

另外，HTML里的<center>标签已过时，建议用CSS的text-align:center替代，保持代码规范。

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