How to align these two buttons using css?-CodePudding

Can anyone kindly help me on how to align these two buttons using css?

 <div>
    <form action="create.html">
        <input type="submit" value="Add" />
    </form>

    <input type="button" value="Delete" onclick="deleteItem()" />
    </div>

As I did the two buttons are one above the other

CodePudding user response：

.buttons{
  display: flex;
  justify-content: center;
}

.buttons form{
  margin: 0 10px;
}

 <div >
    <form action="create.html">
        <input type="submit" value="Add" />
    </form>

    <input type="button" value="Delete" onclick="deleteItem()" />
    </div>

CodePudding user response：

add to div

and id ="btn" to button

<style>  
.container{  
text-align: center;   
padding-top: 100px;  
}  
#btn{  
font-size: 25px;  
}  
</style>

whole code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Center align button</title>
<style>  
.container{  
text-align: center;   
padding-top: 100px;  
}  
#btn{  
font-size: 25px;  
}  
</style> 
</head>
<body>

<div >
    <form action="create.html">
        <input type="submit" value="Add" />
    </form>
<br />

    <input type="button" id ="btn" value="Delete" onclick="deleteItem()" />
    </div>
</body>
</html>