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 つの太字のラベルが、選択ボックスの上ではなく横に表示されています。

  2. 「追加>>」ボタンと「<<削除」ボタンが隣り合って表示されていますが、それらを真上に表示する必要があります。レイアウトをよりユーザーフレンドリーにするために私が従うことができるアプローチを誰かが提案できますか? ブラジル

4

2 に答える 2

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 に答える
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 に答える