MVC单选按钮设计选项

Question

我正在创建一个MVC移动应用程序。 我的一个屏幕包含单选按钮，供用户选择头发长度，眼睛颜色等。 目前的造型非常笨重，每件物品占据了整排。

我可以使用哪些其他造型选项？ 这是一个截图，以便您可以看到它占用了多少空间。 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;
}

Answer 1

似乎单词长度足够短，你可以有两列单选按钮而不是一列。

我认为这是一个比简单缩小收音机按钮更好的解决方案，因为你想让你的目标足够大，以便人手指轻松按下。

示例：

修改

以下是一些（未经测试的）代码，可帮助您入门......

标记：

<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%;
}

您可能希望添加一些边距和/或填充以在列之间创建一些间距并改善美感，但希望这足以让您使用。