基金会-联系表格调整

Question

我一直在使用基础模板来创建我的网站。由于表单的布局是行和列的，我试图改变文本字段的宽度，因为它们在页面上太大了。当我为它们指定高度时，表单会移动到页面的左侧并且不居中。我想让它保持居中以及让文本字段更小。网址是http://www.f-sharpmedia.com/

HTML:


<!-- Contact Form -->
<div class="container">
 <div class="panel">


  <!-- This is where the main form is created for the contact page-->

    <div id="form">
   <div class="row">
  <div class="large-12 columns">

  <div class="panel">
  <h1>Contact F-Sharp Media</h1>
  <br>
<p>Got a creative project for us? Please share as much detail as you can to help us
ensure we can connect you with<br> the right people here at F-Sharp Media. <p>
<div class="large-3 columns">    
</div>

</div>
</div>  
 <!-- FORM -->
 <div id="form">
 <form action="sendmail.php" method="post">

 <p>
  <label for="name">Name:</label>
  <input name="name" id="name" type="text" class="required">
  <span>Please enter your name</span>
  </p>

<p>
<label for="email">Email:</label>
<input name="email" id="email" type="text" class="required"> 
<span>Please enter a valid email address</span>
</p>

<p>
<label for="subject">Subject:</label>
<input name="subject" id="subject" type="text"> 
<span>Please enter your subject</span>
</p>

<p>
<label for="message">Message</label>
<textarea name="message" id="message" class="required"></textarea> 
<span>Please enter your message</span>
</p>
<p class="submit">
<input type="submit" value="Submit" class="btn-submit">
</p>
</form>
</div>
 <div class="row">
 <div class="large-9  columns ">

  </div>
  </div>
  </div>
  </div>

Answer 1

在您的 CSS 中添加以下类。

 .grid_12.omega form p
{
  width:75%; /* Increase or decrease this width to adjust your textbox */
  margin:0px auto;
}