Question

我有一张桌子，桌子末尾有一些选项。查看，编辑和删除。我需要删除按钮作为表单，以便我可以POST删除。

我的按钮/表单不会坐在同一行，我不知道为什么，我使用了form-inline类，并尝试将其设置为显示内联块，但没有任何对我有用。使用bootstrap 3.2。

HTML

<table>
    <tr>
        <td>Something</td>
        <td>
            <a class="btn btn-default" href="/foo/1">View</a>
            <a class="btn btn-primary" href="/foo/1/edit">Edit</a>
            <form class="form-inline" method="POST" action="/foo/1">
                <button class="btn btn-danger">Delete</button>
            </form>
        </td>
    </tr>
        <tr>
        <td>Something else</td>
        <td>
            <a class="btn btn-primary" href="/foo/2/edit">Edit</a>
            <form class="form-inline" method="POST" action="/foo/2">
                <button class="btn btn-danger">Delete</button>
            </form>
        </td>
    </tr>
</table>

CSS

td {
    padding: 10px;
    border-bottom: 1px solid green;
}

Answer 1

默认情况下，大多数浏览器会将form个元素设置为块。要更改此设置，您只需将form设置为显示inline即可。由于您的form元素已经有.form-inline类，我们可以将该特定类设置为以这种方式显示：

form.form-inline {
    display: inline;
}

CodePen demo

将表单/删除按钮与其他按钮对齐

1 个答案: