html - 向居中的 div 添加超过 100% 的宽度，div 仅向右扩展

Question

我目前正在尝试为我的站点重新设计登录页面。不幸的是，我无法弄清楚如何在不向右移动的情况下将 div 设置为 100% 以上，而不是向左移动。我已经尝试了很多东西，但似乎无法得到它。如果有人愿意解释我正在寻找的 CSS 规则，将不胜感激。

参见 codpen和片段:

$(function() {
  "use strict"

  var name;
  var loggedin = $(".loggedin").hide();
  var t = 500;

  function store() {
    name = $("input#username").val();
  }

  function init() {
    $("input[type='submit']").on("click", function() {
      store();
      $(".login_inner, .login_inner__avatar").animate({
        'opacity': '0'
      }, t);
      setTimeout(function() {
        $(".login_inner__check").css({
          'opacity': '1',
          'animation': 'spinner 4s 0s linear',
          'transition': 'all ease 3s'
        });
      });
      setTimeout(function() {
        $(".login_inner__check--complete").find('i').animate({
          'opacity': '1'
        }, 500);
      }, 4200);
      setTimeout(function() {
        $(".login").fadeOut(500, function() {
          $(this).remove();
        });
      }, 5000);
      setTimeout(function() {
        loggedin.fadeIn(t, function() {
          $(this).show();
          $(this).find('h2').html("Welcome " + name);
        });
      }, 5500);
      setTimeout(function() {
        $(".loggedin h2").animate({
          'opacity': '1'
        }, t);
      }, 6000);
    });
  };
  init();
});

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Nunito', sans-serif;
}

html, body {
  background: #EDF2F4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.login {
  background: #2B2D42;
  border-radius: 4px;
  width: 300px;
  height: auto;
}
.login_inner {
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
}
.login_inner__avatar {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/217538/default-avatar-ponsy-deer.png);
  background-size: cover;
  border: 3px solid #EDF2F4;
  width: 4em;
  height: 4em;
  margin: 0 auto;
  -webkit-transform: translateY(-35px);
          transform: translateY(-35px);
  border-radius: 100%;
}
.login_inner__check {
  border: 1px dashed #FFF;
  border-radius: 100%;
  width: 4em;
  height: 4em;
  position: absolute;
  margin: -185px 120px;
  opacity: 0;
  text-align: center;
}
.login_inner__check--complete i {
  line-height: 4em;
  color: #FFF;
  opacity: 0;
}
.login_inner input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: none;
  border-top: none;
  border-right: none;
  border-left: none;
  border-bottom: 1px solid #33354e;
  width: 100%;
  padding: 1.1em;
  color: #FFF;
  outline: none;
  font-size: 0.9em;
  text-align: left;
}
.login_inner input:last-of-type {
  border-bottom: none;
}
.login_inner input[type="submit"] {
  width: 110%;
  background: #4ECDC4;
  cursor: pointer;
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
  text-align: center;
  margin: 3em auto 0 auto;
}

.loggedin {
  background: #2B2D42;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
}
.loggedin h2 {
  opacity: 0;
  color: #FFF;
  text-align: center;
  font-size: 1.7em;
}

::-webkit-input-placeholder {
  color: #FFF;
}

:-moz-placeholder {
  color: #FFF;
}

::-moz-placeholder {
  color: #FFF;
}

:-ms-input-placeholder {
  color: #FFF;
}

::-ms-input-placeholder {
  color: #FFF;
}

.hide {
  opacity: 0;
}

.show {
  opacity: 1;
}

@-webkit-keyframes spinner {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes spinner {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='login'>
  <div class='login_inner'>
    <div class='login_inner__avatar'></div>
    <input id='username' placeholder='Give yourself a username' type='text'>
    <input id='email' placeholder='What is your email?' type='email'>
    <input id='password' placeholder='Choose a password' type='password'>
    <input type='submit' value='Sign up'>
  </div>
  <div class='login_inner__check'>
    <div class='login_inner__check--complete'>
      <i class='fa fa-check'></i>
    </div>
  </div>
</div>
<div class='loggedin'>
  <h2></h2>
</div>

如果您查看 CSS 的第 74 行，上面的笔是登录页面。我正在尝试将此按钮向两个方向扩展以产生环绕效果。由于某些原因，我只能向右调整。我相信这是一个简单的解决方案。

  &[type="submit"] {
    width: 110%;
    background: $c-btn-color;;
    cursor: pointer;
    border-bottom-left-radius: $radius - 2;
    border-bottom-right-radius: $radius - 2;
    text-align: center;
    margin: 3em auto 0 auto;
 }

我已经尝试了所有不同类型的定位、 block 大小等。非常感谢您提供一些建议!

谢谢!

Answer 1

auto button 上的左右边距 - 将其删除并添加 align-self: center 将其环绕 - 参见相关代码摘录:

&[type="submit"] {
    width: 110%;
    background: $c-btn-color;;
    cursor: pointer;
    border-bottom-left-radius: $radius - 2;
    border-bottom-right-radius: $radius - 2;
    text-align: center;
    margin-top: 3em; /* <-- only margin top */
    align-self: center; /* added */
}

参见 updated codepen和片段:

$(function() {
  "use strict"

  var name;
  var loggedin = $(".loggedin").hide();
  var t = 500;

  function store() {
    name = $("input#username").val();
  }

  function init() {
    $("input[type='submit']").on("click", function() {
      store();
      $(".login_inner, .login_inner__avatar").animate({
        'opacity': '0'
      }, t);
      setTimeout(function() {
        $(".login_inner__check").css({
          'opacity': '1',
          'animation': 'spinner 4s 0s linear',
          'transition': 'all ease 3s'
        });
      });
      setTimeout(function() {
        $(".login_inner__check--complete").find('i').animate({
          'opacity': '1'
        }, 500);
      }, 4200);
      setTimeout(function() {
        $(".login").fadeOut(500, function() {
          $(this).remove();
        });
      }, 5000);
      setTimeout(function() {
        loggedin.fadeIn(t, function() {
          $(this).show();
          $(this).find('h2').html("Welcome " + name);
        });
      }, 5500);
      setTimeout(function() {
        $(".loggedin h2").animate({
          'opacity': '1'
        }, t);
      }, 6000);
    });
  };
  init();
});

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Nunito', sans-serif;
}

html, body {
  background: #EDF2F4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.login {
  background: #2B2D42;
  border-radius: 4px;
  width: 300px;
  height: auto;
}
.login_inner {
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
}
.login_inner__avatar {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/217538/default-avatar-ponsy-deer.png);
  background-size: cover;
  border: 3px solid #EDF2F4;
  width: 4em;
  height: 4em;
  margin: 0 auto;
  -webkit-transform: translateY(-35px);
          transform: translateY(-35px);
  border-radius: 100%;
}
.login_inner__check {
  border: 1px dashed #FFF;
  border-radius: 100%;
  width: 4em;
  height: 4em;
  position: absolute;
  margin: -185px 120px;
  opacity: 0;
  text-align: center;
}
.login_inner__check--complete i {
  line-height: 4em;
  color: #FFF;
  opacity: 0;
}
.login_inner input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: none;
  border-top: none;
  border-right: none;
  border-left: none;
  border-bottom: 1px solid #33354e;
  width: 100%;
  padding: 1.1em;
  color: #FFF;
  outline: none;
  font-size: 0.9em;
  text-align: left;
}
.login_inner input:last-of-type {
  border-bottom: none;
}
.login_inner input[type="submit"] {
  width: 110%;
  background: #4ECDC4;
  cursor: pointer;
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
  text-align: center;
  margin-top: 3em;
  /* <-- only margin top */
  align-self: center;
  /* added */
}

.loggedin {
  background: #2B2D42;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
}
.loggedin h2 {
  opacity: 0;
  color: #FFF;
  text-align: center;
  font-size: 1.7em;
}

::-webkit-input-placeholder {
  color: #FFF;
}

:-moz-placeholder {
  color: #FFF;
}

::-moz-placeholder {
  color: #FFF;
}

:-ms-input-placeholder {
  color: #FFF;
}

::-ms-input-placeholder {
  color: #FFF;
}

.hide {
  opacity: 0;
}

.show {
  opacity: 1;
}

@-webkit-keyframes spinner {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes spinner {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='login'>
  <div class='login_inner'>
    <div class='login_inner__avatar'></div>
    <input id='username' placeholder='Give yourself a username' type='text'>
    <input id='email' placeholder='What is your email?' type='email'>
    <input id='password' placeholder='Choose a password' type='password'>
    <input type='submit' value='Sign up'>
  </div>
  <div class='login_inner__check'>
    <div class='login_inner__check--complete'>
      <i class='fa fa-check'></i>
    </div>
  </div>
</div>
<div class='loggedin'>
  <h2></h2>
</div>