堆棧內存溢出
  簡體   English   中英

如何將此表格的標簽和輸入居中？

[英]How do I center the label and input of this form?

 原文  2018-11-08 03:51:08  6   2    html/ css/ codecampserver

問題描述

我是HTML / CSS的新手，對我的CodeCamp項目有一些疑問

  1. 如何將標簽和輸入移動到表單的中心？ 我嘗試使用text-align：居中於我的行類，但它僅將標簽和輸入分開。

  2. 為什么復選框未組合在一起？ 我嘗試擴大底部邊距，但它在標簽應該位於的左側列中顯示了復選框。 

 html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: 'Nunito', sans-serif; background-color: #ea8a8a; } #title { color: #685454; text-align: center; padding: 10px; } #description { color: #685454; text-align: center; padding: 10px; } #outer-form { border-radius: 10px; background-color: #ebd5d5; padding-bottom: 10px; } .row {} .label { color: #685454; display: inline-block; text-align: right; float: left; padding-top: 5px; width: 190px; margin-right: 20px; } #name { padding: 4px; margin-top: 5px; margin-bottom: 5px; display: inline-block; vertical-align: middle; margin-left: 20px; width: 110px; } #email { padding: 4px; margin-top: 5px; margin-bottom: 5px; display: inline-block; vertical-align: middle; margin-left: 20px; width: 110px } #number { padding: 4px; margin-top: 5px; margin-bottom: 5px; display: inline-block; vertical-align: middle; margin-left: 20px; width: 110px } #dropdown { height: 30px; margin-top: 5px; margin-bottom: 14px; display: inline-block; vertical-align: middle; horizontal-align: bottom; margin-left: 20px; width: 120px } input[type=radio] { margin-left: 20px; margin-bottom: 30px; vertical-align: baseline; margin-top: 20px; } input[type=checkbox] { margin-left: 20px; vertical-align: baseline; } #comments { margin-top: 10px; margin-bottom: 5px; vertical-align: middle; margin-left: 20px; width: 150px; height: 50px; } #submit { background-color: #ea8a8a; color: white; border-radius: 5px; font-size: 14px; margin-top: 10px; margin-bottom: 20px; display: inline-block; vertical-align: middle; margin-left: 160px; width: 100px; height: 40px; } 
 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito:400,700"> <h1 id="title">Doge Adoption Form</h1> <div id="outer-form"> <p id="description">Please fill out the questionare below</p> <form id="survey-form"> <div class="row"> <label class="label" id="name-label" for="name">Name: </label> <input id="name" placeholder="Enter your name" required> </input> </div> <div class="row"> <label class="label" id="email-label" for="email">Email: </label> <input id="email" type="email" placeholder="Enter your email" required> </input> </div> <div class="row"> <label class="label" id="number-label" for="age">Age: </label> <input id="number" min="18" max="99" type="number" placeholder="Age:" required> </input> </div> <div class="row"> <text class="label">What is your favorite dog: </text> <select id="dropdown"> <option value="Pomeranian"> Pomeranian</option> <option value="Beagle"> Beagle</option> <option value="German Shepard"> German Shepard</option> </select> </div> <div class="row"> <label class="label">How likely are you to pick up doge poop:</label> <input type="radio" name="odds" value="very likely"> Very Likely <input type="radio" name="odds" value="not likely"> Not Likely </div> <div class="row"> <label class="label"> What tricks will you teach (select all that apply)</label> <input type="checkbox" name="trick" value="Sit">Sit<br> <input type="checkbox" name="trick" value="Army crawl">Army crawl<br> <input type="checkbox" name="trick" value="Roll over">Roll over<br> <input type="checkbox" name="trick" value="Speak">Speak<br> </div> <div class="row"> <label class="label">Any additional information?</label> <textarea id="comments" placeholder="Enter your comment here..."></textarea> </div> <div class="row"> <input id="submit" type="submit" value="Submit"> </div> </form> </div>

2 個解決方案

解決方案1
 0  2018-11-08 04:57:19

這是您的代碼，首先，您應該使用bootstarp編寫代碼，使表單整齊清晰地對齊。

將此鏈接也用於工作親愛的代碼。 

 <!doctype html>
<html>
 <head>
   <meta charset="utf-8">
   <title>Signingroup Financial</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" type="text/css">
<link rel='stylesheet' href='http://fonts.googleapis.com/icon?family=Material+Icons' type='text/css'>
<link href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700" rel="stylesheet" type="text/css">


    <div class="row">
        <div class="sg_formslist">
            <div class="col-sm-12 col-md-12">

             <div id="Selection-1-container" >
                <form  class="form-horizontal" id="form1">
                    <div class="col-sm-12 ">
                        <div class="col-sm-2">
                        </div>
                            <div class="col-sm-6">

                            <div class="form-group">
                                <div class="col-sm-12">
                                    <label class="control-label col-sm-6">Surname<span class="impstar">*</span></label>
                                    <div class="col-sm-6">
                                        <input type="text" class="form-control" name="customer_name" Placeholder="Customer Name"  required>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-sm-12">
                                    <label class="control-label col-sm-6">Mobile Number 1<span class="impstar">*</span></label>
                                    <div class="col-sm-6">
                                        <input type="tel" name="mob_num1" class="form-control" size="10" maxlength="10" Placeholder="+91 - 83445839284" required>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-12">
                                    <label class="control-label col-sm-6">Mobile Number 2<span class="impstar">*</span></label>
                                    <div class="col-sm-6">
                                        <input type="tel" name="mob_num1" class="form-control" size="10" maxlength="10" Placeholder="+91 - 83445839284 ">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group ">
                                <div class="col-sm-12">
                                    <label class="control-label col-sm-6">Gender<span class="impstar">*</span></label>
                                    <div class="col-sm-6">
                                        <div class="radio"  required>
                                          <label >
                                            <input type="radio" name="Selection" id="Selection-1" value="female" checked>
                                            Female
                                          </label>

                                          <label >
                                            <input type="radio" name="Selection" id="Selection-1" value="male" >
                                            Male
                                          </label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                          <div class="form-group">
                            <div class="col-sm-12">
                                <label class="control-label col-sm-6">Description <span class="impstar">*</span></label>
                                <div class="col-sm-6">
                                    <textarea class="form-control" rows="3" name="description" placeholder="Description For Discount"></textarea>
                                </div>
                            </div>
                          </div>

                            <div class="form-group text-right">
                                <i class="fa fa-paper-plane plnay" ></i>
                                <input type="submit" class="btn btn-info" value="Submit ">
                            </div>
                        </div>
                        <div class="col-sm-3">
                        </div>
                    </div>
                    </div>
                </form>
                </div>

            </div>
        </div>

</div>

讓您嘗試使用此代碼。

解決方案2
 0 已采納  2018-11-08 05:08:59

看看這個答案，我在您的頁面中添加了兩種樣式： 

#survey-form {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

.div50 {
  float: left;
  width: 50%;
}

#survey-form使表格對齊中心。

.div50將div划分為父div的50％。 

 { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: 'Nunito', sans-serif; background-color: #ea8a8a; } #title { color: #685454; text-align: center; padding: 10px; } #description { color: #685454; text-align: center; padding: 10px; } #outer-form { border-radius: 10px; background-color: #ebd5d5; padding-bottom: 10px; } .row {} .label { color: #685454; display: inline-block; text-align: right; float: left; padding-top: 5px; width: 190px; margin-right: 20px; } #name { padding: 4px; margin-top: 5px; margin-bottom: 5px; display: inline-block; vertical-align: middle; margin-left: 20px; width: 110px; } #email { padding: 4px; margin-top: 5px; margin-bottom: 5px; display: inline-block; vertical-align: middle; margin-left: 20px; width: 110px } #number { padding: 4px; margin-top: 5px; margin-bottom: 5px; display: inline-block; vertical-align: middle; margin-left: 20px; width: 110px } #dropdown { height: 30px; margin-top: 5px; margin-bottom: 14px; display: inline-block; vertical-align: middle; horizontal-align: bottom; margin-left: 20px; width: 120px } input[type=radio] { margin-left: 30px; margin-bottom: 15px; vertical-align: baseline; margin-top: 10px; } input[type=checkbox] { margin-left: 30px; vertical-align: baseline; } #comments { margin-top: 10px; margin-bottom: 5px; vertical-align: middle; margin-left: 20px; width: 150px; height: 50px; } #submit { background-color: #ea8a8a; color: white; border-radius: 5px; font-size: 14px; margin-top: 10px; margin-bottom: 20px; display: inline-block; vertical-align: middle; margin-left: 160px; width: 100px; height: 40px; } #survey-form { width: 100%; max-width: 400px; margin: 0 auto; } .div50 { float: left; width: 50%; } 
 <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito:400,700"> <h1 id="title">Doge Adoption Form</h1> <div id="outer-form"> <p id="description">Please fill out the questionare below</p> <form id="survey-form"> <div class="row"> <label class="label" id="name-label" for="name">Name: </label> <input id="name" placeholder="Enter your name" required> </div> <div class="row"> <label class="label" id="email-label" for="email">Email: </label> <input id="email" type="email" placeholder="Enter your email" required> </div> <div class="row"> <label class="label" id="number-label" for="age">Age: </label> <input id="number" min="18" max="99" type="number" placeholder="Age:" required> </div> <div class="row"> <text class="label">What is your favorite dog: </text> <select id="dropdown"> <option value="Pomeranian"> Pomeranian</option> <option value="Beagle"> Beagle</option> <option value="German Shepard"> German Shepard</option> </select> </div> <div class="row"> <div class="div50"><label class="label">How likely are you to pick up doge poop:</label></div> <div class="div50"> <input type="radio" name="odds" value="very likely"> <label>Very Likely</label><br> <input type="radio" name="odds" value="not likely"> <label>Not Likely</label> </div> </div> <div class="row"> <div class="div50"> <label class="label"> What tricks will you teach (select all that apply)</label> </div> <div class="div50"> <input type="checkbox" name="trick" value="Sit">Sit<br> <input type="checkbox" name="trick" value="Army crawl">Army crawl<br> <input type="checkbox" name="trick" value="Roll over">Roll over<br> <input type="checkbox" name="trick" value="Speak">Speak<br> </div> </div> <div class="row"> <label class="label">Any additional information?</label> <textarea id="comments" placeholder="Enter your comment here..."></textarea> </div> <div class="row"> <input id="submit" type="submit" value="Submit"> </div> </form> </div>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何使面板主體居中，輸入標簽與輸入框的左側對齊？ 在HTML中，如何在表單的輸入字段中添加標簽？ 如何使用創建HTML表單 <label><input></label> <label>和<span>？</span></label> 如何在輸入表單頂部對齊標簽？ 如何在 div 中垂直居中標簽？ 如何在中心對齊表格，但在輸入的最左側上方有 label 如何使這些左/右對齊的標簽和表格輸入居中？ 如何居中對齊表格的 label 我如何居中對齊表格 我如何居中<form>在 HTML/CSS 中？</form>
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM