我有这组单选按钮,其中每个单独的按钮都有自己通过style属性设置的位置。我想如何使用drupal form api归档相同的内容。我发现如何整体风格,但不是团体内的个人控制。这是我的HTML代码的样子 -
<input type="radio" name="base_location" checked="checked" value="0" style="margin-left:70px;float:left;"/><span style="float:left;">District</span>
<input type="radio" name="base_location" value="1" style="margin-left:50px;float:left;"/><span style="float:left;">MRT</span>
<input type="radio" name="base_location" value="2" style="margin-left:60px;float:left;"/><span style="float:left;">Address</span>
这是我坚持的drupal代码 -
$form['base_location'] = array(
'#type' => 'radios',
'#title' => t('base location'),
'#default_value' => variable_get('search_type', 0),
'#options' => array(
'0'=>t('District'),
'1'=>t('MRT'),
'2'=>t('Address')),
'#description' => t('base location'),
我知道#type =&gt;无线电存在。但是,我不知道如何在这方面将所有单选按钮组合在一起。如果我对所有这些使用相同的数组键,它们将相互冲突。如果我不这样做,他们就不会被视为同一群体的一部分。我提前谢谢你。
答案 0 :(得分:3)
如果您正在使用Drupal 6.x Form API和#type=>radios
(http://api.drupal.org/api/function/theme_radios/6),则每个无线电元素都将拥有其唯一ID,您可以使用它来应用正确的CSS。
您提供的示例
$form['base_location'] = array(
'#type' => 'radios',
'#title' => t('base location'),
'#default_value' => variable_get('search_type', 0),
'#options' => array(
'0'=>t('District'),
'1'=>t('MRT'),
'2'=>t('Address')),
'#description' => t('base location'),
);
应该像这样输出标记:
<div id="base-location-0-wrapper" class="form-item">
<label for="base-location-0" class="option"><input type="radio" class="form-radio" value="0" name="base_location" id="base-location-0"> District</label>
</div>
<div id="base-location-1-wrapper" class="form-item">
<label for="base-location-1" class="option"><input type="radio" class="form-radio" value="1" name="base_location" id="base-location-1"> MRT</label>
</div>
<div id="base-location-2-wrapper" class="form-item">
<label for="base-location-2" class="option"><input type="radio" class="form-radio" value="2" name="base_location" id="base-location-2"> Address</label>
</div>
应用以下CSS,您应该设置。
#base-location-0-wrapper,
#base-location-1-wrapper,
#base-location-2-wrapper {
display:inline;
margin-left:50px;
}
答案 1 :(得分:1)
答案是将CSS与您已有的html一起使用。看起来您只想将单选按钮的显示更改为“内联”,并且可以使用10px页边距。 (如果你确实将无线电分解为一个字段集中的单独元素,它们将不再相互交互。)