內容溢出柔性容器

這是我因特網上發現，它使用簡單的下拉菜單。

我想要使用flexbox及其屬性的下拉菜單。問題是，一列中的元素數量是動態的，但flexbox容器不會根據它改變其高度。

這是我得到

* { 
 
    font-family: sans-serif; 
 
} 
 
@font-face { 
 
    font-family: Oxygen; 
 
    src: url('https://fonts.googleapis.com/css?family=Oxygen'); 
 
} 
 
body{ 
 
    margin: 0; 
 
    background-color: #cbcbcb; 
 
} 
 
nav { 
 
    position: relative; 
 
    background-color: #f8f8f8; 
 
    display: flex; 
 
    justify-content: space-between; 
 
    border-bottom-width: 1px; 
 
    border-bottom-color: black; 
 
} 
 
nav ul { 
 
    height: 50px; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: flex-start; 
 
    margin: 0; 
 
} 
 
nav a { 
 
    text-decoration: none; 
 
    color: #777; 
 
    padding: 15px; 
 
    font-family: sans-serif; 
 
    font-size: 18px; 
 
} 
 
nav a:hover { 
 
    color: #000; 
 
} 
 
.logo a { 
 
    font-size: 25px; 
 
} 
 
nav ul { 
 
    list-style: none; 
 
} 
 
li > ul.drop-menu { 
 
    display: none; 
 
} 
 
li:hover > ul.drop-menu { 
 
    position: absolute; 
 
    top: 100%; 
 
    background-color: white; 
 
    left: 0; 
 
    width: 100%; 
 
    display: flex; 
 
    justify-content: space-around; 
 
    padding-left: 0; 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
} 
 
.drop-col { 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: flex-start; 
 
} 
 
.drop-col > ul { 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    align-items: flex-start; 
 
    padding-left: 0; 
 
} 
 
.drop-header { 
 
    font-size: 18px; 
 
    font-family: sans-serif; 
 
    color: #ff3546; 
 
    padding-top: 5px; 
 
    padding-bottom: 5px; 
 
    line-height: 30px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Navbar</title> 
 
    <script src="live.js"></script> 
 
    <link rel="stylesheet" href="nav.css"> 
 
</head> 
 
<body> 
 
    <nav> 
 
     <ul class="left"> 
 
      <li class="logo"><a href="#">SoulOTrip</a></li> 
 
      <li > 
 
       <a href="#">Adventure Trips</a> 
 
       <ul class="drop-menu"> 
 
        <div class="drop-col"> 
 
         <ul> 
 
          <li class="drop-header">Airforce</li> 
 
          <li>Flying fox</li> 
 
          <li>Bungee Jumping</li> 
 
          <li>Paragliding</li> 
 
         </ul> 
 
        </div> 
 
        <div class="drop-col"> 
 
         <ul> 
 
          <li class="drop-header">Army</li> 
 
          <li>Skiing</li> 
 
          <li>Mountaineering</li> 
 
          <li>Trekking</li> 
 
          <li>Rock Climbing</li> 
 
         </ul> 
 
        </div> 
 
        <div class="drop-col"> 
 
         <ul> 
 
          <li class="drop-header">Navy</li> 
 
          <li>River Rafting</li> 
 
          <li>Parasailing</li> 
 
          <li>Scuba Diving</li> 
 
          <li>Swimming</li> 
 
          <li>Kayaking</li> 
 
          <li>Surfing</li> 
 
         </ul> 
 
        </div> 
 
       </ul> 
 
      </li> 
 
      <li><a href="#">Top Destinations</a></li> 
 
      <li><a href="#">Explore</a></li> 
 
     </ul> 
 
     <ul class="right"> 
 
      <li class=""><a href="#">Username</a></li> 
 
      <li class=""><a href="/login">Login</a></li> 
 
      <li class=""><a href="/register">Register</a></li> 
 
     </ul> 
 
</nav> 
 
</body> 
 
</html>

來源

2017-04-13 Yash Lotan

刪除高度：50像素;從nav ul – Nimish

的問題是，你不小心目標下拉菜單以及因此它限制50px爲好。您可以從

nav ul { 
    /* this affects all ul elements inside the nav, the first level 
     .left as well as the .drop-menu */ 
}

解決這個問題，通過改變選擇以下：

nav > ul { /* <- this affects only the direct descendant (ul.left) */ }

或者你可以在height聲明改爲min-height。

* { 
 
    font-family: sans-serif; 
 
} 
 
@font-face { 
 
    font-family: Oxygen; 
 
    src: url('https://fonts.googleapis.com/css?family=Oxygen'); 
 
} 
 
body{ 
 
    margin: 0; 
 
    background-color: #cbcbcb; 
 
} 
 
nav { 
 
    position: relative; 
 
    background-color: #f8f8f8; 
 
    display: flex; 
 
    justify-content: space-between; 
 
    border-bottom-width: 1px; 
 
    border-bottom-color: black; 
 
} 
 
nav > ul { 
 
    height: 50px; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: flex-start; 
 
    margin: 0; 
 
} 
 
nav a { 
 
    text-decoration: none; 
 
    color: #777; 
 
    padding: 15px; 
 
    font-family: sans-serif; 
 
    font-size: 18px; 
 
} 
 
nav a:hover { 
 
    color: #000; 
 
} 
 
.logo a { 
 
    font-size: 25px; 
 
} 
 
nav ul { 
 
    list-style: none; 
 
} 
 
li > ul.drop-menu { 
 
    display: none; 
 
} 
 
li:hover > ul.drop-menu { 
 
    position: absolute; 
 
    top: 100%; 
 
    background-color: white; 
 
    left: 0; 
 
    width: 100%; 
 
    display: flex; 
 
    justify-content: space-around; 
 
    padding-left: 0; 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
} 
 
.drop-col { 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: flex-start; 
 
} 
 
.drop-col > ul { 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    align-items: flex-start; 
 
    padding-left: 0; 
 
} 
 
.drop-header { 
 
    font-size: 18px; 
 
    font-family: sans-serif; 
 
    color: #ff3546; 
 
    padding-top: 5px; 
 
    padding-bottom: 5px; 
 
    line-height: 30px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Navbar</title> 
 
    <script src="live.js"></script> 
 
    <link rel="stylesheet" href="nav.css"> 
 
</head> 
 
<body> 
 
    <nav> 
 
     <ul class="left"> 
 
      <li class="logo"><a href="#">SoulOTrip</a></li> 
 
      <li > 
 
       <a href="#">Adventure Trips</a> 
 
       <ul class="drop-menu"> 
 
        <div class="drop-col"> 
 
         <ul> 
 
          <li class="drop-header">Airforce</li> 
 
          <li>Flying fox</li> 
 
          <li>Bungee Jumping</li> 
 
          <li>Paragliding</li> 
 
         </ul> 
 
        </div> 
 
        <div class="drop-col"> 
 
         <ul> 
 
          <li class="drop-header">Army</li> 
 
          <li>Skiing</li> 
 
          <li>Mountaineering</li> 
 
          <li>Trekking</li> 
 
          <li>Rock Climbing</li> 
 
         </ul> 
 
        </div> 
 
        <div class="drop-col"> 
 
         <ul> 
 
          <li class="drop-header">Navy</li> 
 
          <li>River Rafting</li> 
 
          <li>Parasailing</li> 
 
          <li>Scuba Diving</li> 
 
          <li>Swimming</li> 
 
          <li>Kayaking</li> 
 
          <li>Surfing</li> 
 
         </ul> 
 
        </div> 
 
       </ul> 
 
      </li> 
 
      <li><a href="#">Top Destinations</a></li> 
 
      <li><a href="#">Explore</a></li> 
 
     </ul> 
 
     <ul class="right"> 
 
      <li class=""><a href="#">Username</a></li> 
 
      <li class=""><a href="/login">Login</a></li> 
 
      <li class=""><a href="/register">Register</a></li> 
 
     </ul> 
 
</nav> 
 
</body> 
 
</html>

來源

2017-04-13 19:16:41 Christoph

將'nav ul'更改爲'nav> ul'是我的需要。修改css選擇器的時間 –

特別是在那些嵌套的菜單結構中，很容易意外地針對錯誤的元素。這就是爲什麼我要麼使用直接後代選擇器'>'，要麼直接使用classes/id（你也可以這樣做，因爲你的所有元素都已經有了很好的類名）。 – Christoph

如果我理解的最終目標，你想改變nav ul { height: 50px; }到min-height: 50px

代碼

* { 
 
    font-family: sans-serif; 
 
} 
 
@font-face { 
 
    font-family: Oxygen; 
 
    src: url('https://fonts.googleapis.com/css?family=Oxygen'); 
 
} 
 
body{ 
 
    margin: 0; 
 
    background-color: #cbcbcb; 
 
} 
 
nav { 
 
    position: relative; 
 
    background-color: #f8f8f8; 
 
    display: flex; 
 
    justify-content: space-between; 
 
    border-bottom-width: 1px; 
 
    border-bottom-color: black; 
 
} 
 
nav ul { 
 
    min-height: 50px; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: flex-start; 
 
    margin: 0; 
 
} 
 
nav a { 
 
    text-decoration: none; 
 
    color: #777; 
 
    padding: 15px; 
 
    font-family: sans-serif; 
 
    font-size: 18px; 
 
} 
 
nav a:hover { 
 
    color: #000; 
 
} 
 
.logo a { 
 
    font-size: 25px; 
 
} 
 
nav ul { 
 
    list-style: none; 
 
} 
 
li > ul.drop-menu { 
 
    display: none; 
 
} 
 
li:hover > ul.drop-menu { 
 
    position: absolute; 
 
    top: 100%; 
 
    background-color: white; 
 
    left: 0; 
 
    width: 100%; 
 
    display: flex; 
 
    justify-content: space-around; 
 
    padding-left: 0; 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
} 
 
.drop-col { 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: flex-start; 
 
} 
 
.drop-col > ul { 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    align-items: flex-start; 
 
    padding-left: 0; 
 
} 
 
.drop-header { 
 
    font-size: 18px; 
 
    font-family: sans-serif; 
 
    color: #ff3546; 
 
    padding-top: 5px; 
 
    padding-bottom: 5px; 
 
    line-height: 30px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Navbar</title> 
 
    <script src="live.js"></script> 
 
    <link rel="stylesheet" href="nav.css"> 
 
</head> 
 
<body> 
 
    <nav> 
 
     <ul class="left"> 
 
      <li class="logo"><a href="#">SoulOTrip</a></li> 
 
      <li > 
 
       <a href="#">Adventure Trips</a> 
 
       <ul class="drop-menu"> 
 
        <div class="drop-col"> 
 
         <ul> 
 
          <li class="drop-header">Airforce</li> 
 
          <li>Flying fox</li> 
 
          <li>Bungee Jumping</li> 
 
          <li>Paragliding</li> 
 
         </ul> 
 
        </div> 
 
        <div class="drop-col"> 
 
         <ul> 
 
          <li class="drop-header">Army</li> 
 
          <li>Skiing</li> 
 
          <li>Mountaineering</li> 
 
          <li>Trekking</li> 
 
          <li>Rock Climbing</li> 
 
         </ul> 
 
        </div> 
 
        <div class="drop-col"> 
 
         <ul> 
 
          <li class="drop-header">Navy</li> 
 
          <li>River Rafting</li> 
 
          <li>Parasailing</li> 
 
          <li>Scuba Diving</li> 
 
          <li>Swimming</li> 
 
          <li>Kayaking</li> 
 
          <li>Surfing</li> 
 
         </ul> 
 
        </div> 
 
       </ul> 
 
      </li> 
 
      <li><a href="#">Top Destinations</a></li> 
 
      <li><a href="#">Explore</a></li> 
 
     </ul> 
 
     <ul class="right"> 
 
      <li class=""><a href="#">Username</a></li> 
 
      <li class=""><a href="/login">Login</a></li> 
 
      <li class=""><a href="/register">Register</a></li> 
 
     </ul> 
 
</nav> 
 
</body> 
 
</html>

來源

2017-04-13 19:15:25

內容溢出柔性容器

回答

相關問題