输入框样式无法正常工作

时间：2017-02-28 14:24:00

标签： css

我把注册表格集中在一起。我还创建了一个标签并使用了一个显示块。但是，我的输入框没有显示在顶部的行。为什么它没有正常工作，即使我没有设置我的行类的高度？我希望它根据我的行类的内容自动变大。请看我的图片：

Create account form 

* {
  margin: 0;
  padding: 0;
}

body {
  width: auto;
  font-family: "Gidole", sans-serif;
}

h1{
  padding: 15px;
  text-align: center;
}


@font-face {
  font-family: "Gidole";
  src: url(CODE Light.otf);
}


.container {
  width: 960px;
  height: 600px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  background: red;
  top: 50px
}

.row {
  width: 320px;
  position: absolute;
  top: 50%;
  left:50%;
  transform: translate(-50%,-50%);
  color: #191919; 
  background-color: #F2FFFA;	
  font-family: "Gidole", sans-serif;
  padding: 10px 55px 40px;	

}

label {
  max-width:300px;
  display: block;
  text-align:left;
}

input {
  width: 100%;
}

#submit {
  display: block;
  width: 100%;
  padding: 5px 10px 5px 10px;
  color: #ffffff;
  background-color: #B73737;;
}

select {
  width: 100%;
}
<div class="container">
  <div class="row">

    <div class="myForm">
      <form action="register.php" method="POST">
        <h1> Create an account</h1> <br/>
        <?php echo registration_error($errors1); ?>
        <label for="">Username</label><input type="text" name="username" size="30" /> <br/><br/>
        <label for="">Password</label><input type="password" name="password"  size="30"/> <br/><br/>
        <label for="">First Name</label><input type="text" name="firstName" size="30" /> <br/><br/>
        <label for="">Last Name</label><input type="text" name="lastName" size="30"> <br/><br/>
        <label for="">Email address</label><input type="text" name="email" size="30"> <br/><br/>
        <label for="">Gender</label><select name="gender" id="gender" >
          <option value="male"> Male </option>
          <option value="female"> Female </option>
          <option value="others"> Others </option>
          <option value="others"> Prefer not to say </option>
        </select> <br/><br/>
          <label for="">Age</label><input type="number" name="age"> <br/><br/>
        <div class="center">
          <input type="submit" name="submit" value="Register" id="submit">
        </div>
      </form>
    </div>
  </div>
</div>

2 个答案:

答案 0 :(得分：0)

标签元素与文本框的顶部重叠，您需要在它们之间添加空格，因此请在输入元素中添加上边距

input {
        width: 100%;
        margin-top:3px;
}

＆＃13;
＆＃13; 
  * {
        margin: 0;
        padding: 0;
    }

    body {
        width: auto;
        font-family: "Gidole", sans-serif;
    }

    h1{
        padding: 15px;
        text-align: center;
    }


     @font-face {
      font-family: "Gidole";
      src: url(CODE Light.otf);
    }


    .container {
        width: 960px;
        height: 600px;
        margin-left: auto;
        margin-right: auto;
        position: relative;
        background: red;
        top: 50px
    }

    .row {
        width: 320px;
        position: absolute;
        top: 50%;
        left:50%;
        transform: translate(-50%,-50%);
        color: #191919; 
        background-color: #F2FFFA;  
        font-family: "Gidole", sans-serif;
        padding: 10px 55px 40px;    

    }

    label {
        max-width:300px;
        display: block;
        text-align:left;
    }

    input {
        width: 100%;
        margin-top:3px;
    }

    #submit {
        display: block;
        width: 100%;
        padding: 5px 10px 5px 10px;
        color: #ffffff;
        background-color: #B73737;;
    }

    select {
        width: 100%;
    }
＆＃13; 
<div class="container">
    <div class="row">

        <div class="myForm">
            <form action="register.php" method="POST">
                <h1> Create an account</h1> <br/>
              
                <label for="">Username</label><input type="text" name="username" size="30" /> <br/><br/>
                <label for="">Password</label><input type="password" name="password"  size="30"/> <br/><br/>
                <label for="">First Name</label><input type="text" name="firstName" size="30" /> <br/><br/>
                <label for="">Last Name</label><input type="text" name="lastName" size="30"> <br/><br/>
                <label for="">Email address</label><input type="text" name="email" size="30"> <br/><br/>
                <label for="">Gender</label><select name="gender" id="gender" >
                    <option value="male"> Male </option>
                    <option value="female"> Female </option>
                    <option value="others"> Others </option>
                    <option value="others"> Prefer not to say </option>
                </select> <br/><br/>
                <label for="">Age</label><input type="number" name="age"> <br/><br/>
                <div class="center">
                    <input type="submit" name="submit" value="Register" id="submit">
                </div>
            </form>
        </div>
    </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

这就是原因，您应该更喜欢使用CSS Reset。因为，您的代码在IE中运行良好。

代码的box-sizing属性设置为浏览器默认，即box-sizing:content-box;。因此，top-border由于borders

占用的大小而被隐藏

最佳做法是使用CSS Reset或Normalizer.css

添加box-sizing: border-box;会修复您的代码。

＆＃13;
＆＃13; 
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* try commenting this property */
}

body {
  width: 100%;
  font-family: "Gidole", sans-serif;
}

h1 {
  padding: 15px;
  text-align: center;
}

.container {
  width: 960px;
  height: 600px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  background: red;
  top: 50px
}

.row {
  width: 320px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #191919;
  background-color: #F2FFFA;
  font-family: "Gidole", sans-serif;
  padding: 10px 55px 40px;
}

label {
  max-width: 300px;
  display: block;
  text-align: left;
}

input {
  width: 100%;
}

#submit {
  display: block;
  width: 100%;
  padding: 5px 10px 5px 10px;
  color: #ffffff;
  background-color: #B73737;
  ;
}

select {
  width: 100%;
}
＆＃13; 
<div class="container">
  <div class="row">
    <div class="myForm">
      <form action="register.php" method="POST">
        <h1> Create an account</h1> <br/>
        <?php echo registration_error($errors1); ?>
        <label for="">Username</label><input type="text" name="username" size="30" /> <br/><br/>
        <label for="">Password</label><input type="password" name="password" size="30" /> <br/><br/>
        <label for="">First Name</label><input type="text" name="firstName" size="30" /> <br/><br/>
        <label for="">Last Name</label><input type="text" name="lastName" size="30"> <br/><br/>
        <label for="">Email address</label><input type="text" name="email" size="30"> <br/><br/>
        <label for="">Gender</label><select name="gender" id="gender">
                    <option value="male"> Male </option>
                    <option value="female"> Female </option>
                    <option value="others"> Others </option>
                    <option value="others"> Prefer not to say </option>
                </select> <br/><br/>
        <label for="">Age</label><input type="number" name="age"> <br/><br/>
        <div class="center">
          <input type="submit" name="submit" value="Register" id="submit">
        </div>
      </form>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题