Question

在下面的代码段中，您可以看到输入字段和按钮的左边距比右边多。他们确实在10px的所有方面都有保证金。为什么双方的保证金不相等，我该如何解决这个问题？

非常感谢提前。亲切的问候

* {
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  font: verdana;
}
html, body {
  font-family: consolas;
  color: #707070 ;
}

@media only screen and (min-width: 1000px) {

#login_form {
  height: 300px;
  background-color: #F0F0F0;
  border-radius: 10px;
}


/*CSS responsive*/
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

[class*="col-"] {
    float: left;
    padding: 15px;
    /*border: 1px solid red;*/
}

.row::after {
    content: "";
    clear: both;
    display: block;
}
}

.button {
  background-color: #003366;
  border: 0px;
  color: white;
  padding: 10px;
  font-family: consolas;
  font-size: 1.2em;
  border-radius: 5px;
  margin: 10px;
  width: 100%;
}

.input {
  padding: 10px;
  border: 0px;
  border-radius: 5px;
  margin: 10px;
  width: 100%;
  font-family: consolas;
  color: #707070;
}

<html>

<head>
  <title>
    Index
  </title>

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>

  <div class="row">
    <div class="col-3"></div>
      <div class="col-6" id="login_form">
        <form action="" method="" name="">
          E-mail:<br />
          <input type="text" name="login_email" value="" class="input" /><br />
          Password:<br />
          <input type="password" name="login_password" value="" class="input"/><br />
          <button class="button">Log in</button>
        </form>
      </div>

  </div>

</body>
</html>

Answer 1

问题是：你的输入有100％，宽度多20px填充和20px边距。这导致超过100％。这就是为什么它在右侧更大。

* {
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  font: verdana;
}
html, body {
  font-family: consolas;
  color: #707070 ;
}

@media only screen and (min-width: 1000px) {

#login_form {
  height: 300px;
  background-color: #F0F0F0;
  border-radius: 10px;
}


/*CSS responsive*/
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

[class*="col-"] {
    float: left;
    padding: 15px;
    /*border: 1px solid red;*/
}

.row::after {
    content: "";
    clear: both;
    display: block;
}
}

.input-wrapper,
.button-wrapper {
  padding: 10px;
}
.button {
  background-color: #003366;
  border: 0;
  color: white;
  padding: 10px 0;
  font-family: consolas;
  font-size: 1.2em;
  border-radius: 5px;
  width: 100%;
}

.input {
  box-sizing: border-box;
  padding: 10px;
  border: 0;
  border-radius: 5px;
  width: 100%;
  font-family: consolas;
  color: #707070;
}

<html>

<head>
  <title>
    Index
  </title>

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>

  <div class="row">
    <div class="col-3"></div>
      <div class="col-6" id="login_form">
        <form action="" method="" name="">
          E-mail:
          <div class="input-wrapper">
            <input type="text" name="login_email" value="" class="input" />
          </div>
          Password:
          <div class="input-wrapper">
            <input type="password" name="login_password" value="" class="input"/>
          </div>
          <div class="button-wrapper">
            <button class="button">Log in</button>
          </div>
        </form>
      </div>

  </div>

</body>
</html>

Answer 2

问题是margin未包含在边框大小调整模型中。它是分开的。所以元素是100％width，加上每边10px margin。实际上并不是左边有更多的间距，只是右margin离开可见页面。只需从两个元素中删除margin即可进行设置。请参阅下面的代码：

* {
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  font: verdana;
}

html, body {
  font-family: consolas;
  color: #707070 ;
}

@media only screen and (min-width: 1000px) {

#login_form {
  height: 300px;
  background-color: #F0F0F0;
  border-radius: 10px;
}

/*CSS responsive*/
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

[class*="col-"] {
    float: left;
    padding: 15px;
    /*border: 1px solid red;*/
}

.row::after {
    content: "";
    clear: both;
    display: block;
}

.button {
  background-color: #003366;
  border: 0px;
  color: white;
  padding: 10px;
  font-family: consolas;
  font-size: 1.2em;
  border-radius: 5px;
  margin: 10px 0;
  width: 100%;
}

.input {
  padding: 10px;
  border: 0px;
  border-radius: 5px;
  margin: 10px 0;
  width: 100%;
  font-family: consolas;
  color: #707070;
}

<html>

<head>
  <title>
    Index
  </title>

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>

  <div class="row">
    <div class="col-3"></div>
      <div class="col-6" id="login_form">
        <form action="" method="" name="">
          E-mail:<br />
          <input type="text" name="login_email" value="" class="input" /><br />
          Password:<br />
          <input type="password" name="login_password" value="" class="input"/><br />
          <button class="button">Log in</button>
        </form>
      </div>

  </div>

</body>
</html>

保证金左右不一样

2 个答案: