Razor页面多表单表情按钮垂直堆叠问题求助

方法1：为表单添加CSS类设置行内块显示 #

在Razor页面的样式区域（<head>或页面底部）添加以下样式：

<style>
    .smiley-form {
        display: inline-block;
        margin: 0 8px; /* 调整表情间的间距 */
    }
</style>

修改表单生成代码，为每个表单添加smiley-form类：

@using (Html.BeginForm("ReviewActionTrials3", "Home", new { mySelection = Smiley.Sentiment.Sad }, FormMethod.Post, new { @class = "smiley-form" }))
{
    <input type="image" src="https://img.icons8.com/color/48/000000/sad.png" alt="Submit Sad">
}

@using (Html.BeginForm("ReviewActionTrials3", "Home", new { mySelection = Smiley.Sentiment.Happy}, FormMethod.Post, new { @class = "smiley-form" }))
{
    <input type="image" src="https://img.icons8.com/color/48/000000/happy.png" alt="Submit Happy">
}

方法2：用Flex容器包裹表单 #

直接将所有表单放入一个flex布局的容器中，无需单独修改表单样式：

<div style="display: flex; gap: 12px;">
    @using (Html.BeginForm("ReviewActionTrials3", "Home", new { mySelection = Smiley.Sentiment.Sad }, FormMethod.Post))
    {
        <input type="image" src="https://img.icons8.com/color/48/000000/sad.png" alt="Submit Sad">
    }

    @using (Html.BeginForm("ReviewActionTrials3", "Home", new { mySelection = Smiley.Sentiment.Happy}, FormMethod.Post))
    {
        <input type="image" src="https://img.icons8.com/color/48/000000/happy.png" alt="Submit Happy">
    }
</div>

原理说明 #

原生<form>标签默认是块级元素，会独占一行导致垂直堆叠。通过display: inline-block让表单在同一行显示，或使用flex容器实现弹性水平布局，即可解决排版问题。

内容的提问来源于stack exchange，提问作者David Burdett