将我的元素切换到＆＃34;位置：绝对＆＃34;防止它占据整个宽度

时间：2017-03-21 18:52:35

标签： html css css-position

当我的容器div设置为display: block和position: static时，我的登录页面会显示我想要的内容。但是，当它变为display: inline-block 或 position: absolute时，它会停止占用其最大宽度500px。我想使用绝对定位来垂直和水平居中我的div，所以我需要布局保持与静态位置时的外观相同。我怎样才能做到这一点？

＆＃13;
＆＃13; 
* {
  -moz-box-sizing: border-box !important;
  -webkit-box-sizing: border-box !important;
  box-sizing: border-box !important;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

#login-box {
  max-width: 500px;
  min-width: 300px;
  box-shadow: #bbb 0 0 20px 0;
  display: block;
  position: static;
  /*position: absolute;*/
}

#HeaderForLoginForm {
  background-image: url('https://dummyimage.com/600x106/333333/fff.png&text=SOME+LOGO');
  background-repeat: no-repeat;
  background-size: 200px;
  background-position-x: center;
  background-position-y: 25px;
  background-color: #000;
  height: 110px;
  text-align: center;
  line-height: 56px;
}

#headerlinks {
  color: rgb(90, 90, 90);
  font-weight: bold;
  font-size: 12px;
  margin-top: 54px;
  display: inline-block;
}

@media (min-width: 450px) {
  #HeaderForLoginForm {
    background-position-x: 25px;
    background-position-y: center;
    text-align: right;
    height: 95px;
    line-height: 95px;
  }
  #headerlinks {
    margin-right: 20px;
    margin-top: 0;
  }
}

#DivForLoginForm {
  background: #b7d9ff;
  background: -webkit-linear-gradient(#b7d9ff, #fff);
  background: -o-linear-gradient(#b7d9ff, #fff);
  background: -moz-linear-gradient(#b7d9ff, #fff);
  background: linear-gradient(#b7d9ff, #fff);
  text-align: center;
}

#LoginForm {
  display: inline-block;
  width: 74%;
  margin-top: 20px;
  margin-bottom: 40px;
}

#LoginForm input.textField {
  display: inline-block;
  width: 100%;
  padding: 10px;
  margin-top: 18px;
  font-size: 14px;
  border-radius: 3px;
  border: 1px solid #999;
}

#terms-wrapper {
  margin-top: 16px;
  margin-bottom: 30px;
  text-align: left;
  font-size: 14px;
  font-weight: bold;
}

#terms-wrapper input {
  margin-left: 0;
  vertical-align: -2px;
}

a[href] {
  color: #0079dd;
  text-decoration: none;
}

a[href]:hover {
  text-decoration: underline;
}

input#btn-login {
  padding: 14px;
  height: auto;
  width: 40%;
  min-width: 100px;
  float: right;
  background-color: #1064d8;
  color: #fff;
  font-weight: bold;
  font-size: 16px;
  outline: none !important;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

input#btn-login:hover {
  background-color: #004BBF;
}

input#btn-login:active {
  background-color: #0031A5;
}

#loginfooter {
  background-image: url("http://images.naldzgraphics.net/2014/08/20-brushed-seamless-texture.jpg");
  color: rgb(100, 100, 100);
  padding: 12px;
  font-size: 11px;
}

[data-val-required] {
  background-color: #fff;
}
＆＃13; 
<section id="login-box-wrapper">
  <div id="login-box">
    <header id="HeaderForLoginForm">
      <div id="headerlinks">
        <a href="#">some link</a> |
        <a href="#">some other link</a>
      </div>
    </header>
    <div id="DivForLoginForm">
      <form method="post" id="LoginForm">
        <input class="textField" id="UserName" name="UserName" placeholder="Username" type="text">
        <input class="textField" id="Password" name="Password" placeholder="Password" type="password">
        <div id="terms-wrapper">
          <input id="HasAcceptedTermsConditions" name="HasAcceptedTermsConditions" type="checkbox">
          <label for="HasAcceptedTermsConditions">
            I agree to the <a id="terms-link" href="#" target="_blank">General Terms of Service</a>
          </label>
        </div>
        <input id="btn-login" type="submit" value="LOG IN">
      </form>
    </div>
    <footer id="loginfooter" style="text-align: center;">
      <span>© 2009-2017 Some Company, LLC — All rights reserved</span>
    </footer>
  </div>
</section>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：3)

将width: 100%;添加到#login-box，以使其接受max-width规则。

使用position: absolute; top，left和transform translate功能，使登录框水平和垂直居中。

#login-box {
    width: 100%;
    max-width: 500px;
    min-width: 300px;
    box-shadow: #bbb 0 0 20px 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate( -50%, -50% );
}

＆＃13;
＆＃13; 
* {
  -moz-box-sizing: border-box !important;
  -webkit-box-sizing: border-box !important;
  box-sizing: border-box !important;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

#login-box {
    width: 100%;
    max-width: 500px;
    min-width: 300px;
    box-shadow: #bbb 0 0 20px 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate( -50%, -50% );
}

#HeaderForLoginForm {
  background-image: url('https://dummyimage.com/600x106/333333/fff.png&text=SOME+LOGO');
  background-repeat: no-repeat;
  background-size: 200px;
  background-position-x: center;
  background-position-y: 25px;
  background-color: #000;
  height: 110px;
  text-align: center;
  line-height: 56px;
}

#headerlinks {
  color: rgb(90, 90, 90);
  font-weight: bold;
  font-size: 12px;
  margin-top: 54px;
  display: inline-block;
}

@media (min-width: 450px) {
  #HeaderForLoginForm {
    background-position-x: 25px;
    background-position-y: center;
    text-align: right;
    height: 95px;
    line-height: 95px;
  }
  #headerlinks {
    margin-right: 20px;
    margin-top: 0;
  }
}

#DivForLoginForm {
  background: #b7d9ff;
  background: -webkit-linear-gradient(#b7d9ff, #fff);
  background: -o-linear-gradient(#b7d9ff, #fff);
  background: -moz-linear-gradient(#b7d9ff, #fff);
  background: linear-gradient(#b7d9ff, #fff);
  text-align: center;
}

#LoginForm {
  display: inline-block;
  width: 74%;
  margin-top: 20px;
  margin-bottom: 40px;
}

#LoginForm input.textField {
  display: inline-block;
  width: 100%;
  padding: 10px;
  margin-top: 18px;
  font-size: 14px;
  border-radius: 3px;
  border: 1px solid #999;
}

#terms-wrapper {
  margin-top: 16px;
  margin-bottom: 30px;
  text-align: left;
  font-size: 14px;
  font-weight: bold;
}

#terms-wrapper input {
  margin-left: 0;
  vertical-align: -2px;
}

a[href] {
  color: #0079dd;
  text-decoration: none;
}

a[href]:hover {
  text-decoration: underline;
}

input#btn-login {
  padding: 14px;
  height: auto;
  width: 40%;
  min-width: 100px;
  float: right;
  background-color: #1064d8;
  color: #fff;
  font-weight: bold;
  font-size: 16px;
  outline: none !important;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

input#btn-login:hover {
  background-color: #004BBF;
}

input#btn-login:active {
  background-color: #0031A5;
}

#loginfooter {
  background-image: url("http://images.naldzgraphics.net/2014/08/20-brushed-seamless-texture.jpg");
  color: rgb(100, 100, 100);
  padding: 12px;
  font-size: 11px;
}

[data-val-required] {
  background-color: #fff;
}
＆＃13; 
<section id="login-box-wrapper">
  <div id="login-box">
    <header id="HeaderForLoginForm">
      <div id="headerlinks">
        <a href="#">some link</a> |
        <a href="#">some other link</a>
      </div>
    </header>
    <div id="DivForLoginForm">
      <form method="post" id="LoginForm">
        <input class="textField" id="UserName" name="UserName" placeholder="Username" type="text">
        <input class="textField" id="Password" name="Password" placeholder="Password" type="password">
        <div id="terms-wrapper">
          <input id="HasAcceptedTermsConditions" name="HasAcceptedTermsConditions" type="checkbox">
          <label for="HasAcceptedTermsConditions">
            I agree to the <a id="terms-link" href="#" target="_blank">General Terms of Service</a>
          </label>
        </div>
        <input id="btn-login" type="submit" value="LOG IN">
      </form>
    </div>
    <footer id="loginfooter" style="text-align: center;">
      <span>© 2009-2017 Some Company, LLC — All rights reserved</span>
    </footer>
  </div>
</section>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

对从文档的正常流程中删除的元素使用width: 100%时要小心。

使用right: 0而不是width: 100%可以优先考虑一致性，这取决于在这些元素中使用边距时您期望的结果。

使用width: 100%。

div {
  height: 20vh;
  border: .2em solid violet;
  box-sizing: border-box;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-color: dodgerblue;
  margin: .5em;
}
<div class="relative">
  <div class="absolute"></div>
</div>

使用right: 0。

div {
  height: 20vh;
  border: .2em solid violet;
  box-sizing: border-box;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-color: dodgerblue;
  margin: .5em;
}
<div class="relative">
  <div class="absolute"></div>
</div>

相关问题
最新问题