内嵌柔性盒项目填充调整问题

我想调整柔性盒上的顶部和底部填充，但这些更改未显示在浏览器中。我认为问题出在以下规则之一：内嵌柔性盒项目填充调整问题

.logo 
{ 
    width: 10%; 

    display: inline-flex; 
} 

.nav 
{ 
    display: flex; 

    align-items: center; 

    background-color: rgba(0, 0, 0, 0.05); 

    margin-bottom: 10%; 
} 

.link-reg 
{ 
    color: black; 

    display: inline-block; 

    margin-right: 3%; 

    text-decoration: none; 

    transition: all .2s ease-in; 

    background-color: white; 

    padding: 1% 2% 1% 2%; 

    border-radius: 15em; 
} 
.link-reg:hover 
{ 
    background-color: rgba(255, 255, 255, 0.7); 
}

的填充设置在线路54小提琴可用here。谢谢！

注：我知道有这样一个问题，但它是不明确的，不包含任何的解释，我不喜欢这个解决方案，如图所示。

来源

2017-01-02 steve

听起来像你使用Firefox。你不应该在Chrome中遇到问题。 http://stackoverflow.com/a/36783414/3597276 –

顺便说一句，图标（锁，男人silouete）在Firefox和Chrome也处于不同的位置。不确定预期的位置是什么？ – sinisake

预期位置如图所示：http://tinypic.com/view.php?pic=1z2iqg7&s=9#.WGnXfVw2C70 – steve

使用Flex的项目百分比时长与Firefox had a bug report，规则显然可以通过2种方式解释为显示here in Michael's answer

一种解决方法可以是使用em代替

.link-reg { 
    color: black; 
    display: inline-block; 
    margin-right: 3%; 
    text-decoration: none; 
    transition: all .2s ease-in; 
    background-color: white; 
    padding: 0.6em 1.2em; 
    border-radius: 15em; 
}

示例代码段

* { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
html { 
 
    background-image: url("backgnd.jpg"); 
 
    background-size: cover; 
 
    font-family: 'Roboto', sans-serif; 
 
} 
 

 
.logo { 
 
    width: 10%; 
 
    display: inline-flex; 
 
} 
 

 
.nav { 
 
    display: flex; 
 
    align-items: center; 
 
    background-color: rgba(0, 0, 0, 0.05); 
 
    margin-bottom: 10%; 
 
} 
 

 
.link-first { 
 
    color: white; 
 
    margin-left: auto; 
 
    margin-right: 3%; 
 
    text-decoration: none; 
 
    transition: color .2s ease-in; 
 
} 
 

 
.link-first:hover { 
 
    color: rgba(255, 255, 255, 0.7); 
 
} 
 

 
.link { 
 
    color: white; 
 
    margin-right: 3%; 
 
    text-decoration: none; 
 
    transition: color .2s ease-in; 
 
} 
 

 
.link:hover { 
 
    color: rgba(255, 255, 255, 0.7); 
 
} 
 

 
.link-reg { 
 
    color: black; 
 
    display: inline-block; 
 
    margin-right: 3%; 
 
    text-decoration: none; 
 
    transition: all .2s ease-in; 
 
    background-color: white; 
 
    padding: 0.6em 1.2em; 
 
    border-radius: 15em; 
 
} 
 

 
.link-reg:hover { 
 
    background-color: rgba(255, 255, 255, 0.7); 
 
} 
 

 
.wrapper { 
 
    background-color: white; 
 
    text-align: center; 
 
    margin-left: 35%; 
 
    margin-right: 35%; 
 
    border-radius: 1em; 
 
    padding-bottom: 3%; 
 
} 
 

 
.header { 
 
    font-size: 200%; 
 
    font-weight: 300; 
 
    padding-top: 3%; 
 
} 
 

 
.sub-header { 
 
    font-weight: 300; 
 
    padding-bottom: 10%; 
 
    margin-top: 1%; 
 
} 
 

 
#un { 
 
    border: 0 none; 
 
    font-size: 120%; 
 
    font-weight: 300; 
 
    display: inline-flex; 
 
    background-color: rgba(0, 0, 0, 0.005); 
 
} 
 

 
.un-wrapper { 
 
    padding: 3% 5% 3% 5%; 
 
    display: flex; 
 
    align-items: center; 
 
    margin-left: 20%; 
 
    margin-right: 20%; 
 
    background-color: rgba(0, 0, 0, 0.05); 
 
    border-radius: 7px; 
 
    margin-bottom: 5%; 
 
    border: 0 solid; 
 
} 
 

 
#pw { 
 
    border: 0 none; 
 
    font-size: 120%; 
 
    font-weight: 300; 
 
    display: inline-flex; 
 
    background-color: rgba(0, 0, 0, 0.005); 
 
} 
 

 
.pw-wrapper { 
 
    padding: 3% 5% 3% 5%; 
 
    display: flex; 
 
    align-items: center; 
 
    margin-left: 20%; 
 
    margin-right: 20%; 
 
    background-color: rgba(0, 0, 0, 0.05); 
 
    border-radius: 7px; 
 
    border: 0 solid; 
 
} 
 

 
.submit { 
 
    display: inline-block; 
 
    background-color: rgba(0, 0, 0, 0.8); 
 
    margin-top: 13%; 
 
    padding: 3% 5% 3% 5%; 
 
    border-radius: .5em; 
 
    cursor: pointer; 
 
    transition: all .2s ease-in; 
 
} 
 

 
.submit:hover { 
 
    background-color: rgba(0, 0, 0, 0.5); 
 
} 
 

 
.s-text { 
 
    color: white; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <title>Login</title> 
 
    <link href="index.css" rel="stylesheet"> 
 
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet"> 
 
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
 
    </head> 
 

 
    <body> 
 
    <div class="nav"> 
 
     <img src="../footer-logo.png" class="logo"> 
 
     <a href="#" class="link-first">Home</a> 
 
     <a href="#" class="link">Community</a> 
 
     <a href="#" class="link-reg">Register</a> 
 
    </div> 
 
    <div class="wrapper"> 
 
     <div class="header"> 
 
     Hello Again, 
 
     </div> 
 
     <div class="sub-header"> 
 
     Please Login 
 
     </div> 
 

 
     <div class="login-wrapper"> 
 
     <div class="un-wrapper"> 
 
      <input type="text" id="un" placeholder="Username"> 
 
      <i style="margin-left: auto;" class="material-icons">account_circle</i> 
 
     </div> 
 
     <div class="pw-wrapper"> 
 
      <input type="password" id="pw" placeholder="Password"> 
 
      <i style="margin-left: auto;" class="material-icons">lock</i> 
 
     </div> 
 
     <div class="submit"> 
 
      <div class="s-text"> 
 
      SUBMIT 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </body> 
 

 
</html>

来源

2017-01-02 09:21:56 LGSon

这是一个非常奇怪的错误... – steve

内嵌柔性盒项目填充调整问题

回答

相关问题