Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Post an Article
Welcome To Ask or Share your Answers For Others

Categories

html - CSS Styling Issue: classes are styled together, but look vastly different

0 votes
150 views
in Technique[技术] by (71.8m points)

html - CSS Styling Issue: classes are styled together, but look vastly different

Trying to figure out why my input fields for my username & password are dramatically different, when they are paired together on my CSS file. Im fairly new and just thinking around, but not sure why there is a size difference.

Wonky sizing from password/ username fields. Disregard the horrible image as the logo, just playing around with it all.

*{
  font-family: "lato", sans-serif;
}
body{
  background-color: #59c9fc;
}
.login-div{
  margin: 100px auto;
  width: 350px;
  background-color: #fff
  padding: 60px;
}
.logo{

  background-color:#59c9fc;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  margin: 0 auto;
  margin-bottom: 10px;

}
.logo img{
  width: 100%;

}
.title, .sub-title{
  text-align: center;
  color: #505050;
  font-size: 35px;
}
.sub-title{
  font-size: 18px;

}

.form{
  width: 100%;
  margin-top: 30px;
}
.form input{
  font-size: 18px;
  padding: 10px 20px 10px 5px;
  border: none;
  outline: none;
  background: none;

}

 .username, .password {
  display: block;
  border-radius: 500px;
  border: 1px solid rgba(0, 0, 0,0.2);
  padding: 10px;
  margin: 10px 0;
  background-color: #fff;

}
.form svg{
  height: 20px;
  margin-bottom: -5px;
  margin-left: 10px;
  margin-right: 5px;
}
.options{
  display: flex;
  flex-direction: row;
  justify-content:space-between;
  padding: 5px 0px;
  margin-bottom: 30px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="main.css" class="css">
  <title>Document</title>
</head>

<body>


  <div class="login-div">
    <div class="logo">
      <img src="finger.png" alt="">
    </div>
    <div class="title">Education Community</div>
    <div class="sub-title">K-12 Education Consultants</div>

    <div class="form">
      <div class="username">
        <svg class="svg-icon" viewBox="0 0 20 20">
          <path
            d="M12.075,10.812c1.358-0.853,2.242-2.507,2.242-4.037c0-2.181-1.795-4.618-4.198-4.618S5.921,4.594,5.921,6.775c0,1.53,0.884,3.185,2.242,4.037c-3.222,0.865-5.6,3.807-5.6,7.298c0,0.23,0.189,0.42,0.42,0.42h14.273c0.23,0,0.42-0.189,0.42-0.42C17.676,14.619,15.297,11.677,12.075,10.812 M6.761,6.775c0-2.162,1.773-3.778,3.358-3.778s3.359,1.616,3.359,3.778c0,2.162-1.774,3.778-3.359,3.778S6.761,8.937,6.761,6.775 M3.415,17.69c0.218-3.51,3.142-6.297,6.704-6.297c3.562,0,6.486,2.787,6.705,6.297H3.415z">
          </path>
        </svg>
        <input type="text" class="text" placeholder="username or email">
      </div>
      <div class="password">
        <svg class="svg-icon" viewBox="0 0 20 20">
          <path
            d="M17.308,7.564h-1.993c0-2.929-2.385-5.314-5.314-5.314S4.686,4.635,4.686,7.564H2.693c-0.244,0-0.443,0.2-0.443,0.443v9.3c0,0.243,0.199,0.442,0.443,0.442h14.615c0.243,0,0.442-0.199,0.442-0.442v-9.3C17.75,7.764,17.551,7.564,17.308,7.564 M10,3.136c2.442,0,4.43,1.986,4.43,4.428H5.571C5.571,5.122,7.558,3.136,10,3.136 M16.865,16.864H3.136V8.45h13.729V16.864z M10,10.664c-0.854,0-1.55,0.696-1.55,1.551c0,0.699,0.467,1.292,1.107,1.485v0.95c0,0.243,0.2,0.442,0.443,0.442s0.443-0.199,0.443-0.442V13.7c0.64-0.193,1.106-0.786,1.106-1.485C11.55,11.36,10.854,10.664,10,10.664 M10,12.878c-0.366,0-0.664-0.298-0.664-0.663c0-0.366,0.298-0.665,0.664-0.665c0.365,0,0.664,0.299,0.664,0.665C10.664,12.58,10.365,12.878,10,12.878">
          </path>
        </svg>
        <input type="text" class="password" placeholder="password">
      </div>
      <div class="options">
        <div class="remember-me">
          <input id="remember-me" type="checkbox">
          <label for="remember-me">Remember me?</label>
        </div>
        <div class="forgot-password">
          <a href="#">Forgot Password</a>
        </div>

      </div>
      <button class="signin-btn">LOGIN</button>
      <div class="signup">
        <a href="#">New client? Register here.</a>
      </div>

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

</html>
question from:https://stackoverflow.com/questions/65911491/css-styling-issue-classes-are-styled-together-but-look-vastly-different

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

Remove the password class form the password input.

<input type="text" placeholder="password">


* {
  font-family: "lato", sans-serif;
}

body {
  background-color: #59c9fc;
}

.login-div {
  margin: 100px auto;
  width: 350px;
  background-color: #fff padding: 60px;
}

.logo {
  background-color: #59c9fc;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  margin: 0 auto;
  margin-bottom: 10px;
}

.logo img {
  width: 100%;
}

.title,
.sub-title {
  text-align: center;
  color: #505050;
  font-size: 35px;
}

.sub-title {
  font-size: 18px;
}

.form {
  width: 100%;
  margin-top: 30px;
}

.form input {
  font-size: 18px;
  padding: 10px 20px 10px 5px;
  border: none;
  outline: none;
  background: none;
}

.username,
.password {
  display: block;
  border-radius: 500px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  padding: 10px;
  margin: 10px 0;
  background-color: #fff;
}

.form svg {
  height: 20px;
  margin-bottom: -5px;
  margin-left: 10px;
  margin-right: 5px;
}

.options {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 5px 0px;
  margin-bottom: 30px;
}
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400&display=swap" rel="stylesheet">

<div class="login-div">
  <div class="logo">
    <img src="finger.png" alt="">
  </div>
  <div class="title">Education Community</div>
  <div class="sub-title">K-12 Education Consultants</div>

  <div class="form">
    <div class="username">
      <svg class="svg-icon" viewBox="0 0 20 20">
        <path d="M12.075,10.812c1.358-0.853,2.242-2.507,2.242-4.037c0-2.181-1.795-4.618-4.198-4.618S5.921,4.594,5.921,6.775c0,1.53,0.884,3.185,2.242,4.037c-3.222,0.865-5.6,3.807-5.6,7.298c0,0.23,0.189,0.42,0.42,0.42h14.273c0.23,0,0.42-0.189,0.42-0.42C17.676,14.619,15.297,11.677,12.075,10.812 M6.761,6.775c0-2.162,1.773-3.778,3.358-3.778s3.359,1.616,3.359,3.778c0,2.162-1.774,3.778-3.359,3.778S6.761,8.937,6.761,6.775 M3.415,17.69c0.218-3.51,3.142-6.297,6.704-6.297c3.562,0,6.486,2.787,6.705,6.297H3.415z">
        </path>
      </svg>
      <input type="text" class="text" placeholder="username or email">
    </div>
    <div class="password">
      <svg class="svg-icon" viewBox="0 0 20 20">
        <path d="M17.308,7.564h-1.993c0-2.929-2.385-5.314-5.314-5.314S4.686,4.635,4.686,7.564H2.693c-0.244,0-0.443,0.2-0.443,0.443v9.3c0,0.243,0.199,0.442,0.443,0.442h14.615c0.243,0,0.442-0.199,0.442-0.442v-9.3C17.75,7.764,17.551,7.564,17.308,7.564 M10,3.136c2.442,0,4.43,1.986,4.43,4.428H5.571C5.571,5.122,7.558,3.136,10,3.136 M16.865,16.864H3.136V8.45h13.729V16.864z M10,10.664c-0.854,0-1.55,0.696-1.55,1.551c0,0.699,0.467,1.292,1.107,1.485v0.95c0,0.243,0.2,0.442,0.443,0.442s0.443-0.199,0.443-0.442V13.7c0.64-0.193,1.106-0.786,1.106-1.485C11.55,11.36,10.854,10.664,10,10.664 M10,12.878c-0.366,0-0.664-0.298-0.664-0.663c0-0.366,0.298-0.665,0.664-0.665c0.365,0,0.664,0.299,0.664,0.665C10.664,12.58,10.365,12.878,10,12.878">
        </path>
      </svg>
      <input type="text" placeholder="password">
    </div>
    <div class="options">
      <div class="remember-me">
        <input id="remember-me" type="checkbox">
        <label for="remember-me">Remember me?</label>
      </div>
      <div class="forgot-password">
        <a href="#">Forgot Password</a>
      </div>

    </div>
    <button class="signin-btn">LOGIN</button>
    <div class="signup">
      <a href="#">New client? Register here.</a>
    </div>

  </div>
</div>

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界，一个免费开放的程序员编程交流平台！开放，进步，分享！让技术改变生活，让极客改变未来！ Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

Just Browsing Browsing

1.4m articles

1.4m replys

5 comments

56.9k users

Most popular tags

Snow Theme by Q2A Market
Powered by Question2Answer
...