0

我在我的 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>
}

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

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

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

4

2 回答 2

0

尝试这样的事情：

@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>
}

如果您使用floatcss 属性，它们将显示在旁边。尝试使用（断线）标记clear中的属性清除（浮动）两侧。br

于 2012-12-26T18:12:01.370 回答
0

当您说“但我需要将它们显示在彼此上方”时很难修复按钮，这是不可能的。使用块元素作为标题是常见的做法。<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>

​</p> 

input[type="button"]
{
    display:block;
    clear:both;
}​
于 2012-12-26T18:23:05.123 回答