css - 使用 Yii 小部件在 div 中增加空间

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/> s 或至少 div.captcha :

.captcha {
    float: left;
}

Here is a demo. (我假设呈现的代码看起来像那样)

如果您还想去掉文本字段和按钮之间的空格，请给它们 float: left太喜欢了this Fiddle .