我正在尝试做一些我觉得愚蠢的事情,而且我确信这很简单。但是,我正在努力在网上找到任何明确的例子。我试过修改div和css,但无济于事。
任何人都可以给我一个明确的例子,例如如何在Cactive表单中的同一行创建一个新模型的2个或更多表单字段,而不是每行上的默认表单。
任何帮助将不胜感激!!
我尝试过form ='wide form'
但是我得到了奇怪的格式,最终就像这里的例子一样: http://imgur.com/E5VVs
答案 0 :(得分:1)
假设这是您的表格(取自Yii文件)
<?php $form = $this->beginWidget('CActiveForm', array(
'id'=>'user-form',
'enableAjaxValidation'=>true,
'enableClientValidation'=>true,
'focus'=>array($model,'firstName'),
)); ?>
<?php echo $form->errorSummary($model); ?>
<div class="row">
<?php echo $form->labelEx($model,'firstName'); ?>
<?php echo $form->textField($model,'firstName'); ?>
<?php echo $form->error($model,'firstName'); ?>
</div>
<div class="row">
<?php echo $form->labelEx($model,'lastName'); ?>
<?php echo $form->textField($model,'lastName'); ?>
<?php echo $form->error($model,'lastName'); ?>
</div>
<?php $this->endWidget(); ?>
您可以根据页面宽度使用构建的蓝图默认值将其拆分为2列,如
<?php $form = $this->beginWidget('CActiveForm', array(
'id'=>'user-form',
'enableAjaxValidation'=>true,
'enableClientValidation'=>true,
'focus'=>array($model,'firstName'),
)); ?>
<?php echo $form->errorSummary($model); ?>
<div class="row">
<div class="span-8">
<?php echo $form->labelEx($model,'firstName'); ?>
<?php echo $form->textField($model,'firstName'); ?>
<?php echo $form->error($model,'firstName'); ?>
</div>
<div class="span-8 last">
<?php echo $form->labelEx($model,'lastName'); ?>
<?php echo $form->textField($model,'lastName'); ?>
<?php echo $form->error($model,'lastName'); ?>
</div>
</div>
<?php $this->endWidget(); ?>
您可以在网上的大量地方熟悉蓝图CSS或通用CSS规则。抱歉,如果没有看到您的代码,我无法提供帮助。如果已经有一个内置的神奇解决方案可能是其他人知道的吗?
答案 1 :(得分:0)
以下示例:
<div class="row">
<?php echo $form->labelEx($model,'firstName'); ?>
<?php echo $form->textField($model,'firstName'); ?>
<?php echo $form->error($model,'firstName'); ?>
</div>
<div class="row">
<?php echo $form->labelEx($model,'lastName'); ?>
<?php echo $form->textField($model,'lastName'); ?>
<?php echo $form->error($model,'lastName'); ?>
</div>
您需要做的就是设置更改一点css
.row {
width:200px; /* or whatever you prefer */
float:left;
}
在完成的浮动元素或其他元素可能奇怪地换行之后,请记住clear:left
。
您也可以使用:
.row {
width:200px; /* or whatever you prefer */
display:inline-block;
}
这会有所不同,但对您来说可能是更好的选择。浮动时,您的行将保持在dom结构中,但可能会产生意外结果。试试两者,看看你想出了什么。
答案 2 :(得分:0)
只需将CSS类更改为&#34;列&#34;而不是&#34; row&#34;在您想要放在同一行之前的div之前。
示例: 要更改以下四行div ...
<div class="row"> ... </div>
<div class="row"> ... </div>
<div class="row"> ... </div>
<div class="row"> ... </div>
分成三个并排放置的div,以及新行的最后一个div,只需执行以下操作:
<div class="column"> ... </div>
<div class="column"> ... </div>
<div class="row"> ... </div>
<div class="row"> ... </div>
或者我完全误解了这个问题......