垂直放置 <form:radiobuttons>答案

【问题标题】：Position <form:radiobuttons> vertically垂直放置 <form:radiobuttons>
【发布时间】：2013-08-16 04:51:32
【问题描述】：

我正在使用 Spring MVC <form:radiobuttons> 来显示单选按钮：

<form:radiobuttons path="selection" items="${arraySelection}" />

但是，它会水平显示它们。生成的HTML如下：

<span>
 <input id="selection1" type="radio" value="0"" name="selection">
 <label for"selection1">Off</label>
</span>
<span>
 <input id="selection2" type="radio" value="1"" name="selection">
 <label for"selection2">On</label>
</span>

如何垂直显示它们？

【问题讨论】：

请不要将 JSTL 与 Spring MVC 中的任意第 3 方 JSP 标签库混淆。要了解 JSTL 的真正含义，请仔细阅读 stackoverflow.com/tags/jstl/info 的介绍我从问题中删除了不相关的 [jstl] 标记（并清理了一些糟糕的英语/术语）。

标签： html css jsp spring-mvc

【解决方案1】：

您可以将默认包装器（即<span>）更改为您可以更好地操作的其他东西，例如<li>。

您可以使用element 属性来更改包装器：

<ul>
  <form:radiobuttons path="selection" items="${arraySelection}" element="li" />
</ul>

然后只需按照您的意愿设置样式即可：

ul.verticalRadios {
  list-style-type: none;
  /* or whatever */
}

...

<ul class="verticalRadios">
  <form:radiobuttons path="selection" items="${arraySelection}" element="li" />
</ul>

【讨论】：

【解决方案2】：

<form:radiobuttons path="selection" items="${arraySelection}" element="br" />

只是一些建议，视情况而定，有时可以只用元素“br”来完成，不需要额外的css。

【讨论】：

【解决方案3】：

另一种解决方案，无需额外的 css 文件

<ul style="list-style: none">
    <form:radiobuttons path="selection" items="${arraySelection}" element="li" />
</ul>

【讨论】：