額外空間部件

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一樣。