Question

我在asp.net mvc web应用程序中有以下视图： -

@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”＆amp; “要导出的客户”显示在选择框旁边，而不是在它们上方。
“添加＆gt;＆gt;” ＆安培; “＆lt;＆lt;＆lt;＆lt;＆lt;＆lt;＆lt;＆lt;＆lt;＆lt;＆lt; Remove＆lt; Remove＆gt; 可以任何人建议我可以遵循的appraoch使布局更加用户友好？ 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（断行）标记中使用br属性清除（浮动）双方。

Answer 2

当你说＆＃34时难以修复按钮;但是我需要它们显示在彼此之上＆＃34;这是不可能的。使用块元素作为标题是常见的做法。 <strong>是内联的，因此不会自然破坏。如果你可以解释你想要按钮的方式，可以编辑这个jsfiddle以适应。

http://jsfiddle.net/fzp4p/1/

（删除了ASP.net位，以便在正确的显示工作之前它可以正常工作）

<h2>Available Customers</h2>
<select id="SelectLeft" multiple="multiple">

</select>      
<input id="MoveRight" type="button" value=" Add &gt;&gt; " />
<input id="MoveLeft" type="button" value=" &lt;&lt; Remove " /> 
<h2>Customer to be Exported</h2>
<select id="SelectRight" name="SelectRight" multiple="multiple">           
</select>
<p><button type="submit" id ="nextpage">Next Page &gt;&gt;</button></p>

input[type="button"]
{
    display:block;
    clear:both;
}

显示两个选择框的标签

2 个答案: