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

Css 使用Yii小部件在div中增加空间,css,yii,Css,Yii,有以下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代码:

<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> 


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

在没有看到渲染输出的情况下,我猜是因为每个默认值的
input
行为类似于
display:inline
inline block
元素。这意味着将渲染诸如换行符之类的空白。将其包裹在另一个
中:

(我假设呈现的代码看起来是这样的)


如果您还想消除文本字段和按钮之间的空格,请给它们一个
float:left
太像in.

是,“captcha”显示为“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>
.captcha {
    float: left;
}