表示テキストフィールドは

Question

我々はthisのようなフォームページを持っている：

手段：：

我々はデザインthisなどを作りたかったです

1. Name &電子メールとそのテキストフィールドは、上記のイメージのように表示されます。

2. メッセージ&そのボックスはコメントセクションのように表示する必要があります。

3. 下記の名前&メールが同じ結果が必要です。

4. 2つのボタンの間にスペースが必要です。

CSS

media only screen and (min-width: 1224px) 
.send-friend h2 { 
    text-align: center; 
} 

@media only screen and (min-width: 1224px) 
    form .legend { 
    border: none; 
    color: #000; 
    font-family: 'Roboto Condensed', sans-serif; 
    font-size: 13px; 
    font-style: normal; 
    font-weight: bold; 
    line-height: 1.4; 
    margin: 0 0 15px; 
    padding-bottom: 7px; 
    text-rendering: optimizespeed; 
    text-transform: uppercase; 
    } 
} 

HTML

<div class="send-friend"> 
    <?php 
echo $this->getMessagesBlock()->toHtml(); 
?> 
    <div class="page-title"> 
    <h1><?php 
echo $this->__('Email to a Friend'); 
?></h1> 
    </div> 
    <form action="<?php 
echo $this->getSendUrl(); 
?>" method="post" id="product_sendtofriend_form"> 
    <div class="fieldset"> 
     <?php 
echo $this->getBlockHtml('formkey'); 
?> 
     <h2 class="legend"><?php 
echo $this->__('Sender Details'); 
?></h2> 
     <ul class="form-list" id="sender_options"> 
     <li class="fields"> 
      <div class="field"> 
      <label for="sender_name" class="required"><em>*</em><?php 
echo $this->__('Name:'); 
?></label> 
      <div class="input-box"> 
       <input name="sender[name]" value="<?php 
echo $this->escapeHtml($this->getUserName()); 
?>" title="<?php 
echo $this->quoteEscape($this->__('Name')); 
?>" id="sender_name" type="text" class="input-text required-entry" /> 
      </div> 
      </div> 
      <div class="field"> 
      <label for="sender_email" class="required"><em>*</em><?php 
echo $this->__('Email:'); 
?></label> 
      <div class="input-box"> 
       <input name="sender[email]" value="<?php 
echo $this->escapeHtml($this->getEmail()); 
?>" title="<?php 
echo $this->quoteEscape($this->__('Email Address')); 
?>" id="sender_email" type="email" autocapitalize="off" autocorrect="off" spellcheck="false" class="input-text required-entry validate-email" /> 
      </div> 
      </div> 
     </li> 
     <li class="wide"> 
      <label for="sender_message" class="required"><em>*</em><?php 
echo $this->__('Message:'); 
?></label> 
      <div class="input-box"> 
      <textarea name="sender[message]" class="input-text required-entry" id="sender_message" cols="3" rows="3"><?php 
echo $this->escapeHtml($this->getMessage()); 
?></textarea> 
      </div> 
     </li> 
     </ul> 
    </div> 
    <div class="fieldset"> 
     <h2 class="legend"><?php 
echo $this->__('Recipient Details'); 
?></h2> 
     <ul class="form-list" id="recipients_options"> 
     <li class="fields"> 
      <div class="field"> 
      <label for="recipients_name" class="required"><em>*</em><?php 
echo $this->__('Name:'); 
?></label> 
      <div class="input-box"> 
       <input name="recipients[name][]" type="text" class="input-text required-entry" id="recipients_name" /> 
      </div> 
      </div> 
      <div class="field"> 
      <label for="recipients_email" class="required"><em>*</em><?php 
echo $this->__('Email Address:'); 
?></label> 
      <div class="input-box"> 
       <input name="recipients[email][]" value="" title="<?php 
echo $this->quoteEscape($this->__('Email Address')); 
?>" id="recipients_email" type="email" autocapitalize="off" autocorrect="off" spellcheck="false" class="input-text required-entry validate-email" /> 
      </div> 
      </div> 
     </li> 
     </ul> 
    </div> 
    <div class="buttons-set"> 
     <p class="back-link"><a href="#" onclick="history.back(); return false;"><small>&laquo; </small><?php 
echo $this->__('Back'); 
?></a></p> 
     <button type="submit" class="button<?php 
if (!$this->canSend()): 
?> disabled<?php 
endif; 
?>"<?php 
if (!$this->canSend()): 
?> disabled="disabled"<?php 
endif; 
?>><span><span><?php 
echo $this->__('Send Email'); 
?></span></span></button> 
    <div id="max_recipient_message" style="display:none;"> 
     <?php 
if ($this->getMaxRecipients()): 
?> 
     <p class="limit"><?php 
    echo $this->__('Maximum %d email addresses allowed.', $this->getMaxRecipients()); 
?></p> 
     <?php 
endif; 
?> 
    </div> 
    <?php 
if (1 < $this->getMaxRecipients()): 
?> 
    <p id="add_recipient_button"> 
     <button type="button" onclick="add_recipient();" class="button"><span><span><?php 
    echo $this->__('Add Recipient'); 
?></span></span></button> 
    </p> 
    <?php 
endif; 
?> 
    </form> 
</div> 

Answer 1

多分フォームを<div>に入れて、入力ボックスの幅を広げることができます。

DOは審美的な目的のためにいくつかの空白を残すためにパディングを入れて:)

を例<input type="text" id="text" name="text_name" style="width: 300px;" /> を（あなたが応答性を考慮していない場合）

をあなたがいるので、あなたが.text{max-width:110%;}

を使用している場合、私は好みますCSSの新機能では、表示されている以前のCSSをカンマと、次のCSSを適用したいそれぞれのタグを入れて、複数のIDに使用することができます。あなたはおそらく、すべてのフィールドに `MAX-width`を追加する必要がtext-align:left

Answer 2

あなたは中央の位置に合わせを設定するために、ブートストラップクラスtext-centerを使用することができます。