额外空间部件

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.（我假设渲染代码看起来类似的东西）

如果你也想摆脱文本F之间的空间然后给他们一个float: left，就像this Fiddle一样。