I can't seem to get these two buttons line up buttons like this. How can I do this?-CodePudding

Design:

Explanation: So I used a div and added CSS (display: inline-block;) and width to it, they were perfectly fine, when I added a tag into it to actually make the buttons do something they went on top of each other, I have tried wrapping them tag in another div but can't seem to make it work.

Here is how they look right now:

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:[email protected]">
                    <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{
   
}

CodePudding user response：

A <form> by default uses display: block.

If you change this to e.g. display: inline-block, then they will flow one after the other, the same as regular text or like e.g. buttons do.

Working demo:

// 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:[email protected]">
            <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>

CodePudding user response：

Using flexbox, all you would need to do is add the following to the parent element of the buttons:

display: flex;
align-items: center;

Add a classname to that div just above your opening form tag and apply to that one. Other guys are right about the form tag being redundant but shouldn't be an issue.

CodePudding user response：

<div className="about-buttons">
   <a className="about-button btn-email" href="mailto:[email protected]">
      <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;
}