我们有像this这样的表单页面：
我们想要进行类似this的设计：
手段：
姓名和电子邮件及其文本字段应显示如上图所示。
消息及其框应显示为注释部分。
同样的结果需要在下面显示姓名和电子邮件。
底部的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>« </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>
最佳答案
也许您可以尝试将表单放在<div>中，然后增加输入框的宽度。
为了美观起见，请放置填充物以留出一些空白：)
示例<input type="text" id="text" name="text_name" style="width: 300px;" />
（如果您不考虑响应能力）
我希望您使用.text{max-width:110%;}
由于您是CSS的新手，因此您可以将前面的CSS用作多个ID，只需添加一个逗号和您希望以下CSS应用于的相应标签即可。
然后，对于表示哪个文本框是什么的单词，可以使用text-align:left
关于html - 在页面中心显示文本字段，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37922777/