添加form标签后按钮堆叠，如何实现两个按钮横向对齐？

问题根源 #

form标签默认是块级元素（display: block），会独占一行，所以两个form容器会自动上下排列，导致按钮无法横向对齐。

三种解决方案 #

方案1：给form添加行内块样式 #

直接修改CSS，让form变成行内块元素，和你之前处理按钮的逻辑一致：

/* 在原有CSS基础上添加 */
.About--btn form {
    display: inline-block;
    margin: 0; /* 清除form默认的上下外边距 */
}

方案2：用Flex布局重构按钮容器 #

用Flex布局替代空白div实现间距，布局更简洁可控：

修改后的React组件代码

export default function About() {
    return (
        <div className="About--div">
            <h3 className="About--name">Huzaifa Aziz</h3>
            <h5 className="About--job">前端开发工程师</h5>
            <a className="About--site"></a>
            <div className="About--btn">
                <div className="btn-group">
                    <form action="mailto:huzaifaaziz90@gmail.com">
                        <button className="Email--btn" ><i className='fa fa-envelope'></i> 邮箱</button>
                    </form>
                    <form action="https://www.linkedin.com/in/huzaifah-aziz-63092996/">
                        <button className="Linkedin--btn"><i className='fa fa-linkedin'></i> 领英</button>
                    </form>
                </div>
            </div>
        </div>
    )
}

修改后的CSS代码

/* 替换原有About--btn相关样式 */
.About--btn {
    margin-top: 15px;
}

.btn-group {
    display: flex;
    gap: 17px; /* 控制按钮间距 */
    justify-content: center; /* 水平居中 */
}

.btn-group form {
    margin: 0; /* 清除form默认外边距 */
}

方案3：移除form标签，用React事件实现功能（推荐） #

React项目中更常用的方式是直接给按钮绑定点击事件，避免form标签破坏布局：

export default function About() {
    const openEmail = () => {
        window.location.href = "mailto:huzaifaaziz90@gmail.com";
    };

    const openLinkedin = () => {
        window.open("https://www.linkedin.com/in/huzaifah-aziz-63092996/", "_blank");
    };

    return (
        <div className="About--div">
            <h3 className="About--name">Huzaifa Aziz</h3>
            <h5 className="About--job">前端开发工程师</h5>
            <a className="About--site"></a>
            <div className="About--btn">
                <button className="Email--btn" onClick={openEmail}>
                    <i className='fa fa-envelope'></i> 邮箱
                </button>
                <div className="About--btn--space"></div>
                <button className="Linkedin--btn" onClick={openLinkedin}>
                    <i className='fa fa-linkedin'></i> 领英
                </button>
            </div>
        </div>
    )
}

这种方式完全保留你原本的布局结构，同时实现按钮跳转功能。

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