內嵌柔性盒項目填充調整問題

我想調整柔性盒上的頂部和底部填充，但這些更改未顯示在瀏覽器中。我認爲問題出在以下規則之一：內嵌柔性盒項目填充調整問題

.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

內嵌柔性盒項目填充調整問題

回答

相關問題