如何并排创建两个 HTML 按钮

Question

这是两个按钮的代码片段。我希望它们并排放置，但目前，一个按钮位于另一个按钮之上。如你看到的

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

原文由 Tashi Tamu 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

   .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>

原文由 kesava reddy 发布，翻译遵循 CC BY-SA 4.0 许可协议