Добавляя ширину более 100% к центрированному элементу div, элемент div расширяется только вправо - PullRequest
Новая
       12

Добавляя ширину более 100% к центрированному элементу div, элемент div расширяется только вправо

1 голос
/ 19 апреля 2019

В настоящее время я пытаюсь изменить дизайн страницы входа для моего сайта.К сожалению, я не могу понять, как установить 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>

Приведенное выше перо - это страница входа, если вы посмотрите на строку 74 CSS.Я пытаюсь развернуть эту кнопку в обоих направлениях, чтобы обернуть эффект.Я могу только настроить права по какой-то причине.Я уверен, что это простое решение. 

  &[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;
 }

Я перепробовал все типы позиционирования, размеры блоков и т. Д. Буду очень признателен за совет!

Спасибо!

1 Ответ

1 голос
/ 19 апреля 2019

У вас есть авто поля слева и справа на 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>
...