1

MVCモバイルアプリケーションを作成しています。私の画面の1つには、ユーザーが髪の長さや目の色などを選択するためのラジオボタンが含まれています。現在のスタイリングは非常にかさばり、各アイテムが1列全体を占めています。

他にどのようなスタイリングオプションを自由に使用できますか？これがスクリーンショットで、どのくらいのスペースを占めているかを確認できます。 http://i.imgur.com/PgRr1.png

以下は、@danmのコードの一部です。

これはViews/PersonalDetails/Edit.cshtmlです。

    <fieldset>
        <legend>Hair Length</legend>
        @Html.RadioButtonFor(e => e.HairLength, 0, new { id = "hair-short" })
        @Html.Label("hair-short", "Short")
        @Html.RadioButtonFor(e => e.HairLength, 1, new { id = "hair-medium" })
        @Html.Label("hair-medium", "Medium")
        @Html.RadioButtonFor(e => e.HairLength, 2, new { id = "hair-long" })
        @Html.Label("hair-long", "Long")
    </fieldset>

これはsite.csです

.field-validation-error {
color: #f00;
display: block;
margin-top: 8px;
text-align: center;
}

.field-validation-valid {
display: none;
}

.input-validation-error {
border: 1px solid #f00;
background-color: #fee;
}

.validation-summary-errors {
font-weight: bold;
color: #f00;
}

.validation-summary-valid {
display: none;
}

.input input {
float: left;
}
.input label {
margin: 0px, 0px, 5px, 5px;
}

/* jQuery mobile styles
-----------------------------------------------------------*/

/* Make listview buttons fill the whole horizontal width of the screen */
.ui-li .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li {
padding-right: 15px;
}

.ui-bar-a, .ui-body-a, .ui-btn-up-a, .ui-btn-hover-a, .ui-btn-down-a,
.ui-bar-b, .ui-body-b, .ui-btn-up-b, .ui-btn-hover-b, .ui-btn-down-b,
.ui-bar-c, .ui-body-c, .ui-btn-up-c, .ui-btn-hover-c, .ui-btn-down-c,
.ui-bar-d, .ui-body-d, .ui-btn-up-d, .ui-btn-hover-d, .ui-btn-down-d,
.ui-bar-e, .ui-body-e, .ui-btn-up-e, .ui-btn-hover-e, .ui-btn-down-e,
.ui-btn-active  {
text-shadow: none;
}
4

1 に答える 1

4

単語の長さが十分に短いため、1列ではなく2列のラジオボタンを使用できるようです。

人間の指が簡単に押すことができるようにターゲットを十分に大きく保ちたいので、これは単にラジオボタンを縮小するよりも優れた解決策だと思います。

例：

ここに画像の説明を入力してください

編集

ここにあなたが始めるためのいくつかの（テストされていない）コードがあります...

マークアップ：

<fieldset>
    <div id="column-1">
        <legend>Hair Length</legend>
        @Html.RadioButtonFor(e => e.HairLength, 0, new { id = "hair-short" })
        @Html.Label("hair-short", "Short")
        @Html.RadioButtonFor(e => e.HairLength, 1, new { id = "hair-medium" })
        @Html.Label("hair-medium", "Medium")
        @Html.RadioButtonFor(e => e.HairLength, 2, new { id = "hair-long" })
        @Html.Label("hair-long", "Long")
    </div>
    <div id="column-2">
        <legend>Eye Colour</legend>
        @Html.RadioButtonFor(e => e.EyeColour, 0, new { id = "eyes-blue" })
        @Html.Label("eyes-blue", "Blue")
        @Html.RadioButtonFor(e => e.EyeColour, 1, new { id = "eyes-brown" })
        @Html.Label("eyes-brown", "Brown")
        @Html.RadioButtonFor(e => e.EyeColour, 2, new { id = "eyes-gray" })
        @Html.Label("eyes-gray", "Gray")
    </div>
</fieldset>

CSS：

#column-1
{
    float:left;
    width:50%;
}

#column-2
{
    float:left;
    width:50%;
}

余白やパディングを追加して、列の間に間隔を空けたり、美観を向上させたりすることもできますが、これで十分に作業できるようになることを願っています。

于 2012-07-26T00:37:47.330 に答える