Question

我正在尝试做一些我觉得愚蠢的事情，而且我确信这很简单。但是，我正在努力在网上找到任何明确的例子。我试过修改div和css，但无济于事。

任何人都可以给我一个明确的例子，例如如何在Cactive表单中的同一行创建一个新模型的2个或更多表单字段，而不是每行上的默认表单。

任何帮助将不胜感激!!

我尝试过form ='wide form'

但是我得到了奇怪的格式，最终就像这里的例子一样： http://imgur.com/E5VVs

Answer 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规则。抱歉，如果没有看到您的代码，我无法提供帮助。如果已经有一个内置的神奇解决方案可能是其他人知道的吗？

Answer 2

以下示例：

<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结构中，但可能会产生意外结果。试试两者，看看你想出了什么。

Answer 3

只需将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>

或者我完全误解了这个问题......

Yii：同一行上的Cactiveform字段

3 个答案: