时间戳

首页 > 解决方案 > 如何并排创建两个 HTML 按钮

html - 如何并排创建两个 HTML 按钮

问题描述

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

彼此重叠的按钮 我希望它看起来像这样

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

标签： htmlcss

解决方案

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

推荐阅读