Question

有以下PHP代码：

<div class="row">
<div class="captcha">
<? $this->widget('CCaptcha', array('showRefreshButton'=>false)); ?>
</div><?php echo $form->textField($model, 'verifyCode', array('class'=>'resume-form-input')); ?>
<?php echo CHtml::submitButton('Done', array('class'=>'button-style')); ?>
</div>

如您所见，此“行”包含验证码小部件，文本字段，提交按钮。但这段代码看起来很糟糕。如果我按以下方式格式化它：

<div class="row">
<div class="captcha">
<? $this->widget('CCaptcha', array('showRefreshButton'=>false)); ?>
</div>
<?php echo $form->textField($model, 'verifyCode', array('class'=>'resume-form-input')); ?>
<?php echo CHtml::submitButton('Done', array('class'=>'button-style')); ?>
</div>

我在文字字段之前有一个额外的空格。有什么问题？

Answer 1

在没有看到渲染输出的情况下，我猜是因为每个默认值input的行为类似于display: inline或inline-block元素。这意味着渲染了像换行符这样的空格。将其包裹在另一个<div/>：

中

<div class="row">
    <div class="captcha">
        <? $this->widget('CCaptcha', array('showRefreshButton'=>false)); ?>
    </div>
    <div>
        <?php echo $form->textField($model, 'verifyCode', array('class'=>'resume-form-input')); ?>
        <?php echo CHtml::submitButton('Done', array('class'=>'button-style')); ?>
    </div>
</div>

在不知道您希望如何显示的情况下，很难说，但听起来您希望将float: left应用于内部<div/>或至少div.captcha ：

.captcha {
    float: left;
}

Here is a demo.（我假设渲染的代码看起来像那样）

如果您还想摆脱文本字段和按钮之间的空格，请在this Fiddle中为float: left提供{{1}}。

使用Yii小部件在div中的额外空间

1 个答案: