如何将此表格的标签和输入居中？

时间：2018-11-08 03:51:09

标签： 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 个答案:

答案 0 :(得分：0)

这是您的代码，首先您应该使用bootstarp编写代码，使表格整齐清晰。

也可以使用此链接来处理亲爱的代码。

$_GET['code'] = (isset($_GET['code']) ? $_GET['code'] : 'default value');

          

    

 <!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">

让您尝试使用此代码。

答案 1 :(得分：0)

看看这个答案，我在您的页面中添加了两种样式：

#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>

相关问题
最新问题