我似乎无法让这两个按钮像这样排列按钮。 我怎样才能做到这一点？

Question

设计：

说明：所以我使用了一个 div 并添加了 CSS (display: inline-block;) 和宽度，它们非常好，当我在其中添加一个标签以实际使按钮执行它们相互叠加的操作时，我尝试将它们标签包装在另一个 div 中，但似乎无法使其工作。

以下是它们现在的样子：

HTML：

export default function About() {
    return (

        <div className="About--div">

            <h3 className="About--name">Huzaifa Aziz</h3>
            <h5 className="About--job">Frontend Developer</h5>
            <a className="About--site"></a>
            <div className="About--btn">
                <div>
                <form action="mailto:huzaifaaziz90@gmail.com">
                    <button className="Email--btn" ><i className='fa fa-envelope'></i> Email</button>
                </form>
                <div className="About--btn--space"></div>
                <form action="https://www.linkedin.com/in/huzaifah-aziz-63092996/">
                    <button className="Linkedin--btn"><i className='fa fa-linkedin'></i> Linkedin</button>
                </form>
                 </div>
                 </div>
        </div>
    )}

CSS：

* {
    box-sizing: border-box;
   
}
body{
    border-radius: 20px;
    background: #23252C;
    margin: auto;
    width: 100%;
    border: 3px solid #1A1B21;
    padding: 10px;
    font-family: 'Inter', sans-serif;
}

.About--div{
    text-align:center
    
    }

.About--name{
    color: white;
} 
   
.About--job{
    color: #F3BF99;

}

.About--site{
    color: #F5F5F5;

}
.About--btn{
    margin-top: 15px;
}
.About--btn--space{
    width: 17px;
    display: inline-block;
}

.Email--btn{
    background: whitesmoke;
    border: none;
    width: 115px;
    height: 34px;
    border-radius: 5px;
          
}

.Linkedin--btn{
    background: #5093E2;
    border: none;
    width: 115px;
    height: 34px;
    color: white;
    border-radius: 5px;
    
    
}

.fa fa-linkedin{
   
}

Answer 1

<form>默认使用display: block 。

如果您将其更改为例如display: inline-block ，那么它们将一个接一个地流动，与常规文本或例如按钮一样。

工作演示：

 // export default function About() { //... // } const About = function() { return ( <div className="About--div"> <h3 className="About--name">Huzaifa Aziz</h3> <h5 className="About--job">Frontend Developer</h5> <a className="About--site"></a> <div className="About--btn"> <div> <form action="mailto:huzaifaaziz90@gmail.com"> <button className="Email--btn" > <i className='fa fa-envelope'></i> Email </button> </form> <div className="About--btn--space"></div> <form action="https://www.linkedin.com/in/huzaifah-aziz-63092996/"> <button className="Linkedin--btn"> <i className='fa fa-linkedin'></i> Linkedin </button> </form> </div> </div> </div> ) } ReactDOM.render(<About />, document.getElementById('react'));

 * { box-sizing: border-box; } form { display: inline-block; } body{ border-radius: 20px; background: #23252C; margin: auto; width: 100%; border: 3px solid #1A1B21; padding: 10px; font-family: 'Inter', sans-serif; }.About--div{ text-align:center }.About--name{ color: white; }.About--job{ color: #F3BF99; }.About--site{ color: #F5F5F5; }.About--btn{ margin-top: 15px; }.About--btn--space{ width: 17px; display: inline-block; }.Email--btn{ background: whitesmoke; border: none; width: 115px; height: 34px; border-radius: 5px; }.Linkedin--btn{ background: #5093E2; border: none; width: 115px; height: 34px; color: white; border-radius: 5px; }.fa fa-linkedin{ }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="react"></div>

Answer 2

使用 flexbox，您需要做的就是将以下内容添加到按钮的父元素中：

display: flex;
align-items: center;

将一个类名添加到您的开始表单标记上方的那个 div 并应用于那个。 其他人对表单标签是多余的是正确的，但不应该成为问题。

Answer 3

<div className="about-buttons">
   <a className="about-button btn-email" href="mailto:huzaifaaziz90@gmail.com">
      <i className="fa fa-envelope"></i>Email
   </a>

   <a className="about-button btn-email" href="https://www.linkedin.com/in/huzaifah-aziz-63092996/">
      <i className="fa fa-linkedin"></i>LinkedIn
   </a>
</div>

.about-buttons {
   display: inline-block;
}

.about-button:not(:last-of-type) {
   margin-right: 25px;
}

.about-button i {
   margin-right: 5px;
}