Question

我有一些像这样的HTML：

    <div class="request" style="text-align: center">
        <span>{{ request.username }} wants to be your friend!</span>
        <form action="/accept_friend" method="POST">
            <input type="hidden" value="{{ request.user_a }}" name="sender_id">
            <button type="submit">Accept</button>
        </form>
    </div>

我想在同一行显示跨栏文本右侧的按钮。目前按钮位于跨度之下。

如果我从容器div中删除style="text-align: center"并将style="float: left"添加到范围，它会正确显示，但不会像我想要的那样居中显示在页面中。我已经玩了一下display属性，但是没有通过反复试验找到合适的解决方案。有人能帮助我吗？

Answer 1

为display: inline;定义inline-block或form（否则它将是一个块，默认情况下为100％宽）：

form {
  display: inline-block;
  margin-left: 10px;
}

<div class="request" style="text-align: center">
        <span>{{ request.username }} wants to be your friend!</span>
        <form action="/accept_friend" method="POST">
            <input type="hidden" value="{{ request.user_a }}" name="sender_id">
            <button type="submit">Accept</button>
        </form>
    </div>

CSS使用text-align：center在容器div中的同一行上显示span和按钮元素

1 个答案: