更改div的寬度以適應內容後絕對定位

我想打一個下拉菜單
更改div的寬度以適應內容後絕對定位

爲了隱藏前徘徊子菜單，設置我的.dropdown內容display: none;
而且因爲我設置position: absolute;所以div被縮小，但我想要子菜單的寬度適合內容的大小。我知道display: inline-block;可以使塊元素適合內容的大小，但怎麼能解決這種情況呢？請幫助我，我真的很感激！

nav.dropdown-nav { 
 
    background: #000000; 
 
    list-style-type: none; 
 
    display: flex; \t \t \t /**/ 
 
    display: -weblit-flex; 
 
} 
 
nav.dropdown-nav>li { 
 
    position: relative; 
 
} 
 
nav.dropdown-nav>li>a { 
 
    text-decoration: none; 
 
    color: #FFFFFF; 
 
    border-right: 1px solid #FFFFFF; 
 
    padding: 12px 30px; 
 
    margin: 8px 0; 
 
    display: block; 
 
} 
 
div.dropdown-content { 
 
    position: absolute; /**/ 
 
    top: 60px; 
 
    background: #333333; 
 
    opacity: 0.9; 
 
    padding: 0 30px; 
 
    display: none; 
 
    width: 100%; 
 
} 
 
div.dropdown-content a { 
 
    text-decoration: none; 
 
    color: #FFFFFF; 
 
    padding: 10px 0; 
 
    display: block; 
 
} 
 
nav.dropdown-nav>li:hover>a { 
 
    color: #B3B3B3; 
 
} 
 
nav.dropdown-nav>li:hover div.dropdown-content { 
 
    display: block; 
 
} 
 
div.dropdown-content li:hover a { 
 
    color: #B3B3B3; 
 
}

<html> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <link rel="stylesheet" type="text/css" href="css/reset.css" /> 
 
    <link rel="stylesheet" type="text/css" href="css/basic.css" /> 
 
    <link rel="stylesheet" type="text/css" href="css/nav-style.css" /> 
 
    </head> 
 
    <body> 
 
    <nav class="dropdown-nav"> 
 
     <li> 
 
     <a href="#">WOMEN</a> 
 
     <div class="dropdown-content"> 
 
      <ul> 
 
      <li><a href="#">Accessories</a></li> 
 
      <li><a href="#">Bags & Purses</a></li> 
 
      <li><a href="#">Blazers</a></li> 
 
      <li><a href="#">Coats & Jackets</a></li> 
 
      <li><a href="#">Dresses</a></li> 
 
      <li><a href="#">Hoodies & Sweatshirts</a></li> 
 
      </ul> 
 
     </div> 
 
     </li> 
 
     <li> 
 
     <a href="#">MEN</a> 
 
     </li> 
 
    </nav> 
 
    </body> 
 
</html>

來源

2016-07-05 hayley

你爲什麼不張貼你已經使用了這個太 – matthewelsom

給人一種CSS，甚至CSS更好地提供小提琴會幫助很多人，理解並解決問題 – sam

@m atthewelsom因爲'.dropdown-content a'中的文本太長，所以在添加'white-space：nowrap;'後會超過div：（＃： – hayley

設置由子菜單項目的長度子菜單寬度。

ul { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.dropdown-nav > li { 
 
    position: relative; 
 
    display: inline-block; 
 
    width: auto; 
 
} 
 
.dropdown-menu { 
 
    background: aliceblue; 
 
} 
 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background: salmon; 
 
    width: auto; /* This will make the sub menu auto fit it's content */ 
 
} 
 
.dropdown-content a{ 
 
    white-space: nowrap; /* This will stop the long sub items from wrapping */ 
 
} 
 
.dropdown-menu:hover ~ .dropdown-content, 
 
.dropdown-content:hover { 
 
    display: block; 
 
}

<nav class="dropdown-nav"> 
 
    <li> 
 
    <a class="dropdown-menu" href="#">WOMEN</a> 
 
    <div class="dropdown-content"> 
 
     <ul> 
 
     <li><a href="#">Accessories Accessories Accessories Accessories </a></li> 
 
     <li><a href="#">Bags & Purses</a></li> 
 
     </ul> 
 
    </div> 
 
    </li> 
 
    <li> 
 
    <a href="#">MEN</a> 
 
    
 
    </li> 
 
</nav>

您的代碼示例：

nav.dropdown-nav { 
 
\t background: #000000; 
 
\t list-style-type: none; 
 
\t display: flex; \t \t \t /**/ 
 
\t display: -weblit-flex; 
 
} 
 
nav.dropdown-nav>li { 
 
\t position: relative; 
 
} 
 
nav.dropdown-nav>li>a { 
 
\t text-decoration: none; 
 
\t color: #FFFFFF; 
 
\t border-right: 1px solid #FFFFFF; 
 
\t padding: 12px 30px; 
 
\t margin: 8px 0; 
 
\t display: block; 
 
} 
 
div.dropdown-content { 
 
\t position: absolute; /**/ 
 
\t top: 60px; 
 
\t background: #333333; 
 
\t opacity: 0.9; 
 
\t padding: 0 30px; 
 
\t display: none; 
 
\t width: auto; 
 
} 
 
div.dropdown-content a { 
 
\t text-decoration: none; 
 
\t color: #FFFFFF; 
 
\t padding: 10px 0; 
 
\t display: block; 
 
    white-space: nowrap; 
 
} 
 
nav.dropdown-nav>li:hover>a { 
 
\t color: #B3B3B3; 
 
} 
 
nav.dropdown-nav>li:hover div.dropdown-content { 
 
    display: block; 
 
} 
 
div.dropdown-content li:hover a { 
 
\t color: #B3B3B3; 
 
}

<html> 
 
<head> 
 
\t <meta charset="utf-8"> 
 
\t <link rel="stylesheet" type="text/css" href="css/reset.css" /> 
 
\t <link rel="stylesheet" type="text/css" href="css/basic.css" /> 
 
\t <link rel="stylesheet" type="text/css" href="css/nav-style.css" /> 
 
</head> 
 
<body> 
 
\t <nav class="dropdown-nav"> 
 
\t \t <li> 
 
\t \t \t <a href="#">WOMEN</a> 
 
\t \t \t <div class="dropdown-content"> 
 
\t \t \t \t <ul> 
 
\t \t \t \t \t <li><a href="#">Accessories</a></li> 
 
\t \t \t \t \t <li><a href="#">Bags & Purses</a></li> 
 
\t \t \t \t \t <li><a href="#">Blazers</a></li> 
 
\t \t \t \t \t <li><a href="#">Coats & Jackets</a></li> 
 
\t \t \t \t \t <li><a href="#">Dresses</a></li> 
 
\t \t \t \t \t <li><a href="#">Hoodies & Sweatshirts</a></li> 
 
\t \t \t \t </ul> 
 
\t \t \t </div> 
 
\t \t </li> 
 
\t \t <li> 
 
\t \t \t <a href="#">MEN</a> 
 
\t \t </li> 
 
\t </nav> 
 
</body> 
 
</html>

來源

2016-07-05 03:22:24 matthewelsom

更改div的寬度以適應內容後絕對定位

回答

相關問題