Question

所以我在这里有一个看起来不错的表格，除了底部的按钮不能正确居中。最终的结果是假设居中，horiontally布局的按钮略微间隔开，就像你通常在表格上看到的那样。

但我制作的那个并没有正确居中。我确定我在这里只是遗漏了一些愚蠢的东西，但任何人都可以帮忙纠正这个问题吗？

HTML

<div id="contact_form">
  <form name="contact" id="contact" method="post" action="submit_form.php">
      <p>Title</p>
         <label>
            <span>Name: </span><input name="name" id="name" placeholder="Full Name" type="text" autofocus required />
         </label>

         <label>
         <span>Email: </span><input name="email" id="email" placeholder="Email Address" type="email" required />
                     </label>

                     <label>
                        <span>Subject: </span>
                        <select name="selection">
                           <option value="1">Option 1</option>
                           <option value="2">Option 2</option>
                           <option value="3">Option 3</option>
                           <option value="4">Option 4</option>
                           <option value="5">Option 5</option>
                           <option value="6">Option 6</option>
                           <option value="7">Option 7</option>
                        </select>
                     </label>

                     <label>
                        <span>Message: </span><textarea name="message" id="message" placeholder="Your Message" required></textarea>
                     </label>

                  <button class="send" type="submit" name="submit" value="submit">Submit</button>
                  <button class="clear" type="reset" name="clear" value="clear">Reset</button>
               </form>
            </div>

CSS

#contact_content{
   background-color: lightgrey;
   margin-left: 1rem;
   margin-right: 1rem;
   border-radius: 20px 20px 20px 20px;
   padding-bottom: 3rem;
   padding-top: 1rem;
   padding-left: 1rem;
   padding-right: 1rem; 
}

#contact_content h1{
   background-color: black;
   border-radius: 20px 20px 20px 20px;
   padding: .5rem;
   margin-bottom: 2rem;
}

#contact_form p{
   text-align: center;
   padding: 1rem;
   margin-bottom: 2rem;
   border-bottom: 1px solid #444;
   font-weight: bold;
   color: red;
   font-size: 1.2rem;   
}

#contact_form{
   background-color: #555;
   border-radius: 10px 10px 10px 10px;
   margin-top: 5rem;
   padding-bottom: 2rem;
   max-width: 600px;
   margin: 0 auto;
}

#contact_form label{
   display: block;
   margin: 0px 0px 5px;
}

textarea:focus, select:focus, input:focus {
    border: 2px solid darkblue;
}

#contact_form label>span{
   float: left;
   color: red;
   width: 5rem;
   font-weight: bold;
   margin-left: 3rem;
}

#contact_form input, #contact_form select, #contact_form textarea{
   background-color: #DFDFDF;
   height: 25px;
   text-indent: 5px;
   margin-bottom: 16px;
   border-radius: 2px;
   width: 65%;
}

#contact_form textarea{
   height: 150px;
}

button{
   border-radius: 5px 5px 5px 5px;
   background-color: black;
   color: red;
   padding: .5rem;

   text-align: center;
   margin: 0 auto;
   margin-left: 50%;
}

的jsfiddle： https://jsfiddle.net/t1phcxfx/

Answer 1

尝试在CSS中添加一个浮点数：

.send {
  display: block;
  float: left;
}

.clear {
  display: block;
}

更新了您的Fiddle

然后，您可以将margin或padding添加到您的课程（也许是父课程），并根据需要将内容集中在一起。

按钮不会以HTML格式对齐

1 个答案: