垂直对齐一组单选按钮，并在必要时将其分开 [英] Aligning a group of radio button vertically and divide it if necessarely

问题描述

我一直在寻找解决这个问题的方法，但是我找不到特别能满足我要求的方法，所以如果你们中的任何一个能提供帮助的话，那真的很酷！

I have been looking for a solution for this problem but I couldn't find any in particular satisfying my request so it would be really cool if any of you can help!

问题是，例如，我有7个单选按钮在DIV标签内垂直对齐，但是我想找到一种方法(例如JavaScript函数)将它们动态地分为两组，例如左侧的4个按钮和左边的3右边.

The problem is that I have for example 7 radio buttons aligned vertically inside a DIV tag but I want to find a way (a JavaScript function for example) to divide them in two groups dynamically for example 4 buttons on the left side and the 3 left on the right.

就目前而言，我只是通过在父对象中添加另外两个div子标签并将其放置在彼此旁边的方式对其进行了硬编码，但这并不能解决我的问题！

For now, I just hard coded it by adding two other div child-tag inside the parent one and putted them beside each others, but this won't solve my problem!

例如，我现在有以下代码:

For example, I have this code right now:

.radioButtonList{ 
	width: 300px;
    margin-left: 1px;
	margin-top: 15px;
}

.radioButtonListDevidedFirst{ 
	width: 100px;
    float: left;
    height: 300px;
}

.radioButtonListDevidedSecond{ 
	width: 200px;
    float: left;
    height: 300px;
}

<div class="radioButtonList">	
  <div class="radioButtonListDevidedFirst">
	  <div class="radioItem">
		<dspel:input type="radio" id="X" bean="Y" value="blue" checked="${CONDITION}"/>
		<label for="value"><fmt:message key="keyExample" bundle="${myBundle}"/></label>
	  </div>
	  <div class="radioItem">
		<dspel:input type="radio" id="X" bean="Y" value="blue" checked="${CONDITION}"/>
		<label for="value"><fmt:message key="keyExample" bundle="${myBundle}"/></label>
	  </div>
	  <div class="radioItem">
		<dspel:input type="radio" id="X" bean="Y" value="blue" checked="${CONDITION}"/>
		<label for="value"><fmt:message key="keyExample" bundle="${myBundle}"/></label>
	  </div>
	  <div class="radioItem">
		<dspel:input type="radio" id="X" bean="Y" value="blue" checked="${CONDITION}"/>
		<label for="value"><fmt:message key="keyExample" bundle="${myBundle}"/></label>
	  </div>
  </div>
					
  <div class="radioButtonListDevidedSecond">
	  <div class="radioItem">
		  <dspel:input type="radio" id="X" bean="Y" value="blue" checked="${CONDITION}"/>
		  <label for="value"><fmt:message key="keyExample" bundle="${myBundle}"/></label>
	  </div>
	  <div class="radioItem">
		  <dspel:input type="radio" id="X" bean="Y" value="blue" checked="${CONDITION}"/>
		  <label for="value"><fmt:message key="keyExample" bundle="${myBundle}"/></label>
	  </div>
	  <div class="radioItem">
		  <dspel:input type="radio" id="X" bean="Y" value="blue" checked="${CONDITION}"/>
		  <label for="value"><fmt:message key="keyExample" bundle="${myBundle}"/></label>
	  </div>
  </div>
					
</div>

推荐答案

尝试CSS3

div {
  -webkit-column-count: 2;
  /* Chrome, Safari, Opera */
  -moz-column-count: 2;
  /* Firefox */
  column-count: 2;
}

<div>
  <input type="radio" name="group">Option 1
  <br>
  <input type="radio" name="group">Option 2
  <br>
  <input type="radio" name="group">Option 3
  <br>
  <input type="radio" name="group">Option 4
  <br>
  <input type="radio" name="group">Option 5
  <br>
  <input type="radio" name="group">Option 6
  <br>
  <input type="radio" name="group">Option 7
  <br>
  <div>

这篇关于垂直对齐一组单选按钮，并在必要时将其分开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！