html - 显示两个选择框的标签

Question

我在我的 asp.net mvc Web 应用程序中有以下 View :-

@using (Html.BeginForm("CustomersDetails", "Home"))
{
    <strong>Available Customers</strong>
    <select id="SelectLeft" multiple="multiple">
    @foreach (var item2 in Model.OrderBy(a => a.ORG_NAME))
    {
        <option value = "@item2.ORG_ID" >@item2.ORG_NAME</option>
    }
    </select>      
    <input id="MoveRight" type="button" value=" Add >> " />
    <input id="MoveLeft" type="button" value=" << Remove " /> 
    <strong>Customer to be Exported</strong>
    <select id="SelectRight" name="SelectRight" multiple="multiple">           
    </select>
    <p><button type="submit" id ="nextpage">Next Page >></button></p>
}   

页面的布局不像我期望的那样，我面临这些问题:-

两个粗体标签“Avilable customer”和“Customer to be Exported”显示在选择框旁边而不是它们上方。

“添加>>”和“<<删除”按钮彼此并排显示，但我需要将它们显示在彼此上方。
任何人都可以建议我可以遵循的方法以使布局更加用户友好吗？
BR

Answer 1

尝试这样的事情:

@using (Html.BeginForm("CustomersDetails", "Home"))
{
    <text>
        <strong>Available Customers</strong>
        <br style='clear:both;' />
        <select id="SelectLeft" multiple="multiple">
        @foreach (var item2 in Model.OrderBy(a => a.ORG_NAME))
        {
            <option value = "@item2.ORG_ID" >@item2.ORG_NAME</option>
        }
        </select>      

        <input id="MoveRight" type="button" value=" Add >> " />
        <br style='clear:both;' />
        <input id="MoveLeft" type="button" value=" << Remove " /> 

        <strong>Customer to be Exported</strong>
        <br style='clear:both;' />
        <select id="SelectRight" name="SelectRight" multiple="multiple">           
        </select>
        <p>
            <button type="submit" id ="nextpage">Next Page >></button>
        </p>
    </text>
}

如果您使用 float css 属性，它们将显示在旁边。尝试使用 clear 清除( float )两侧br 中的属性(property)(断线)标签。