html - 减少文本字段宽度并在文本下方显示评论框

Question

我们有这样的联系我们页面

我想这样改

当我尝试 width : 75 % 时，它仅适用于 Name

input[type=email], input[type=search], input[type=number], input[type=password], input[type=tel], input[type=text] {
    height: 32px;
    padding: 0 8px;
    border: 1px solid #d1d1d1;
    background: #FFFFFF;
    font-size: 13px;
}

html

<div id="messages_product_view"><?php echo $this->getMessagesBlock()->toHtml() ?></div>
<!-- <div class="page-title">
    <h1><?php echo Mage::helper('contacts')->__('Contact Us') ?></h1>
</div> -->
<form action="<?php echo $this->getUrl('contacts/index/post'); ?>" id="contactForm" method="post" class="scaffold-form">
    <div class="fieldset">
        <h2 class="legend"><?php echo Mage::helper('contacts')->__('Contact Information') ?></h2>
        <p class="required"><?php echo Mage::helper('contacts')->__('* Required Fields') ?></p>
        <ul class="form-list">
            <li class="fields">
                <div class="field">
                    <label for="name" class="required"><em>*</em><?php echo Mage::helper('contacts')->__('Name') ?></label>
                    <div class="input-box">
                        <input name="name" id="name" title="<?php echo Mage::helper('core')->quoteEscape(Mage::helper('contacts')->__('Name')) ?>" value="<?php echo $this->escapeHtml($this->helper('contacts')->getUserName()) ?>" class="input-text required-entry" type="text" />
                    </div>
                </div>
                <div class="field">
                    <label for="email" class="required"><em>*</em><?php echo Mage::helper('contacts')->__('Email') ?></label>
                    <div class="input-box">
                        <input name="email" id="email" title="<?php echo Mage::helper('core')->quoteEscape(Mage::helper('contacts')->__('Email')) ?>" value="<?php echo $this->escapeHtml($this->helper('contacts')->getUserEmail()) ?>" class="input-text required-entry validate-email" type="email" autocapitalize="off" autocorrect="off" spellcheck="false" />
                    </div>
                </div>
            </li>
            <li>
                <label for="telephone"class="required"><em>*</em><?php echo Mage::helper('contacts')->__('Telephone') ?></label>
                <div class="input-box required-entry">
                    <input name="telephone" id="telephone" title="<?php echo Mage::helper('core')->quoteEscape(Mage::helper('contacts')->__('Telephone')) ?>" value="" class="input-text required-entry validate-digits" type="tel" />
                </div>
            </li>
            <li class="wide">
                <label for="comment" class="required"><em>*</em><?php echo Mage::helper('contacts')->__('Comment') ?></label>
                <div class="input-box">
                    <textarea name="comment" id="comment" title="<?php echo Mage::helper('core')->quoteEscape(Mage::helper('contacts')->__('Comment')) ?>" class="required-entry input-text" cols="5" rows="3"></textarea>
                </div>
            </li>
        </ul>
    </div>
    <div class="buttons-set">
        <input type="text" name="hideit" id="hideit" value="" style="display:none !important;" />
        <button type="submit" title="<?php echo Mage::helper('core')->quoteEscape(Mage::helper('contacts')->__('Submit')) ?>" class="button"><span><span><?php echo Mage::helper('contacts')->__('Submit') ?></span></span></button>
    </div>
</form>
<script type="text/javascript">
//<![CDATA[
    var contactForm = new VarienForm('contactForm', true);
//]]>
</script>

我想在白色背景的中心放置 4 个文本框

Answer 1

此处更新了评论框宽度和显示的 css。

/*Width of the form */
input, textarea{
 width: 75%;
}

/*Form Inputs Customization */
input[type=text],
input[type=email], 
input[type=tel] {
    height: 34px;
    padding: 0 8px;
    border: 1px solid #bfbfbf;
    background: #FFFFFF;
    font-size: 15px;
}

/*Submit Button */
input[type=submit] {
	font-size: 20px;
	font-weight: bold;
}