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

Question

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

我在第二个表单上进行了检查并手动将CSS设置为display：inline-block并且它不会向上移动。我尝试了一些没有运气的事情。

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

这是屏幕截图。

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

<assembly> 
    ...
    <dependencySets>
        <dependencySet>
        <scope>compile</scope>  
        <includes>
               <include>*:jar:*</include>
            </includes>
        <outputDirectory>/online-store/lib</outputDirectory>
    </dependencySet>
    <dependencySet>
        <scope>test</scope> 
        <includes>
               <include>*:jar:*</include>
            </includes>
        <outputDirectory>/online-store/lib</outputDirectory>
    </dependencySet>
  </dependencySets>
</assembly>

在检查器中，我可以手动将其添加到两个表单标签中并且它可以正常工作，但是当我运行页面时，我的自定义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块已经在另一个元素中了，所以这应该有效。

Answer 2

删除表单中的p，因为我认为没有理由保留它们并使用

display：inline-block;

表格。