如何并排创建两个HTML按钮 [英] How to create two HTML buttons side by side

问题描述

这是两个按钮的代码片段.我希望它们并排放置，但是目前，一个按钮位于另一个按钮之上.如您所见

This is a snippet of code for two buttons. I want them to be side by side but currently, one button is on top of other. as you can see

HTML

    <div class="buttons">

            <div class="action_btn">

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

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

            </div>

        </div>

CSS

    .buttons {
width: 960px;
margin: 0 auto;}

    .action_btn {
width: 500px;
margin: 0 auto;}

推荐答案

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

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

<div class="buttons">

            <div class="action_btn">

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

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

            </div>

        </div>

这篇关于如何并排创建两个HTML按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！