CSS - 如何将按钮向上并排移动？

Question

我只想将“取消过滤器”按钮向上移动到“过滤器”按钮的右侧。这是 MVC/Index.cshtml 文件。我也在使用 Bootstrap。我正在使用 Chrome。

我检查了第二个表单并手动将 CSS 设置为 display: inline-block 并且它没有向上移动。我尝试了几件事，但没有成功。

<p>
    @Html.ActionLink("Create New", "Create")

    @using (Html.BeginForm("Index", "Movies", FormMethod.Get))
    {
        <p>
            Genre: @Html.DropDownList("movieGenre", "All")
            Title: @Html.TextBox("searchStringEntered")
            <input type="submit" value="Filter" />
        </p>
    }

    @using (Html.BeginForm("Index", "Movies", FormMethod.Get))
    {
       <p>
           <input type="submit" value="Cancel Filter" />
       </p>
    }
</p>

这是屏幕截图。

根据下面的讨论，我在我的 Site.css 文件中为表单创建了一个规则:

.side-by-side {
    display: inline-block !important;
}

在检查器中，我可以手动将它添加到两个表单标签并且它有效，但是当我运行该页面时，我的自定义 Site.css 文件没有显示。所以规则不是进入浏览器。但是，我的自定义 Site.css 文件显示了其他地方的其他规则。 所以我不明白为什么它没有被浏览器拾取。

这是我手动添加到两个表单标签的屏幕截图 - display: inline-block - 并且它有效。它向上移动了取消过滤器按钮。屏幕截图还显示了我添加到标记中的新 CSS 类。

这是一个屏幕截图，其中它选取了我的 Site.css 文件并应用了 CSS 规则。所以我知道它识别它。

Answer 1

你可以这样使用:

<style> .side-by-side { display: inline-block; } </style>
<p class="side-by-side"> Filter </p>
<p class="side-by-side"> Cancel </p>

因为您想要并排放置的 p block 已经在另一个元素中，所以这应该可行。