为选项设置 DropDownListFor CSS答案

【问题标题】：Setting DropDownListFor CSS for options为选项设置 DropDownListFor CSS
【发布时间】：2012-07-24 15:27:43
【问题描述】：

我有以下将我的下拉菜单设置为荒谬的宽度：

<div class="editor-field">
  @Html.DropDownListFor(x => x.TypeId, new SelectList(Model.Type, "TypeId", "TypeName"), null, new {  @style = "width: 500;" })
                                </div>

如何获取在填充下拉列表中显示为选项的项目以移动它们的对齐方式，例如居中对齐文本？

这是我的目标，我认为应该工作，可以找到here。

但正如您所见，选项文本仍在左侧。有什么想法吗？

【问题讨论】：

另请参阅SO post，关于在 IE 的选择选项中将文本居中（tl;dr：你不能。）
而且，正如他们所说的那样！谢谢罗迪。

标签： css asp.net-mvc drop-down-menu razor html.dropdownlistfor

【解决方案1】：

你想要这样的东西吗？

My Fiddle

My New Fiddle

另外注意，您使用的是 500px 宽度，这是为了什么？

【讨论】：

你好，外星人先生。下拉菜单的宽度只是一个荒谬的条目，所以我可以清楚地看到文本是左、右或居中:)
不是真的没有外星人先生。所以我拿了你的小提琴并稍微扩展了jsfiddle.net/ricardodeano/r7XeZ/13。
我在“这是我的第一个”之后在那个巨大的下拉列表和文本对齐：中心；似乎没有做我想做的事。
您能否准确地展示您想要的图像，因为这似乎符合您的要求
当然 - 给我几秒钟。

【解决方案2】：

我不太确定你的目标是什么。

但如果我理解正确

<select class="ddl">
    <option>Option1</option>
    <option>Option2</option>
</select>

css

.ddl{text-align: center; width:250px;}
option{text-align: center;}

示例：Click Here

【讨论】：

它可以在 Firefox 中使用吗？无论如何，这就是你所期望的吗？我的意思是我在 jsfiddle 中创建的那个