我似乎無法讓這兩個按鈕像這樣排列按鈕。 我怎樣才能做到這一點？

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;
}