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

您可能希望添加一些边距和/或填充以在列之间创建一些间距并提高美观度，但希望这足以满足您的工作需求。