How to align two button in single row?-CodePudding

Here is my code :

<div >
<div >
<button type="button" >Yes</button>
<button type="button" >No</button>
</div>
</div>

What I need is my button to be display in single row with a small space in between.

But I got like this:

How to fix this?. Kindly help. Thanks in advance.

CodePudding user response：

I think this is the easiest possible modern solution:

.flex {
  display: flex;
  gap: 16px;
}

<div >
   <button>Button 1</button>
   <button>Button 2</button>
</div>

CodePudding user response：

Add this in the css of your .ui-dialog-buttonset class:

.ui-dialog-buttonset button {
    display: inline-block;
}
.ui-dialog-buttonset > button:last-child {
    margin-left: 16px;
}

CodePudding user response：

display: flex; or display: inline-block;

CodePudding user response：

  .buttons {
width: 200px;
margin: 0 auto;
display: inline;}

    .action_btn {
width: 200px;
margin: 0 auto;
display: inline;}

HTML

<div >

            <div >

            <button name="submit"  type="submit" value="Save" onclick="myFunction()">Save</button>
            <button name="submit"  type="submit" value="Cancel" onclick="myFunction2()">Cancel</button>

            <p id="saved"></p>

            </div>

        </div>