Question

<div class="Login">
       <input type="text" placeholder="Full Name" id="Full Name">  
       <input type="password" placeholder="Password" id="Password">  
       <a href="#" class="forgot">forgot password?</a>
       <input type="submit" value="Sign In">
    </div>

这是我上面的代码，但是盒子相距太远了。我希望他们在彼此的几个px内。我已经尝试更改我的.css文件上的边距和填充没有运气。这是我的下面的CSS;

   .Login {
  background: #eceeee;
  border: 1px solid #42464b;
  border-radius: 6px;
  height: 242px;
  margin: 15px auto 0;
  margin-top: 6px;
  width: 288px;
  padding-top: 6px;
  padding-bottom: 1px;
  padding-right: 10px;
}
.Login h1 {
  background-image: linear-gradient(top, #f1f3f3, #d4dae0);
  border-bottom: 1px solid #a6abaf;
  border-radius: 6px 6px 0 0;
  box-sizing: border-box;
  color: #727678;
  display: block;
  height: 43px;
  font: 600 14px/1 'Open Sans', sans-serif;
  padding-top: 6px;
  padding-bottom: 1px;
  margin: 0px;
  text-align: center; 
  text-shadow: 0 -1px 0 rgba(0,0,0,0.2), 0 1px 0 #fff;

我需要更改或添加什么代码以使它们更接近？

谢谢：）

Answer 1

我稍微更改了你的代码

＆＃13;

   .Login {
  background: #eceeee;
  border: 1px solid #42464b;
  border-radius: 6px;
  height: 242px;
  margin: 15px auto 0;
  margin-top: 6px;
  width: 500px;
  padding-top: 6px;
  padding-bottom: 1px;
  padding-right: 10px;
  text-align:center;
}
.Login h1 {
  background-image: linear-gradient(top, #f1f3f3, #d4dae0);
  border-bottom: 1px solid #a6abaf;
  border-radius: 6px 6px 0 0;
  box-sizing: border-box;
  color: #727678;
  display: block;
  height: 43px;
  font: 600 14px/1 'Open Sans', sans-serif;
  padding-top: 6px;
  padding-bottom: 1px;
  margin: 0px;
  text-align: center; 
  text-shadow: 0 -1px 0 rgba(0,0,0,0.2), 0 1px 0 #fff; }

.submit, .password {
  margin-left:-3px;
}

＆＃13;

<div class="Login">
       <input type="text" placeholder="Full Name" id="Full Name">  
       <input class="password" type="password" placeholder="Password" id="Password">  
       <input class="submit" type="submit" value="Sign In"><br><br>
  <a href="#" class="forgot">forgot password?</a>
    </div>

＆＃13;

（只需按Run snippet）

Answer 2

如果您希望输入框更近，则只需添加负边距。

.Login > input {
    margin-right: -3px;
}

https://jsfiddle.net/do6qhg74/

或者您使用float将元素放在彼此旁边：

.Login > input {
    float: left;
}

https://jsfiddle.net/3eq7jwwk/

如何将输入框以更接近的符号形式移动？

2 个答案: