如何使跨度寬度100％的父李？

Question

我怎樣才能使一個跨度父李

<ul> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">About</a> 
     <span> 
       <a href="#">One</a> 
       <a href="#">Three</a> 
       <a href="#">Four</a> 
     </span> 
    </li> 
    <li><a href="#">Services</a> 
     <span> 
       <a href="#">One</a> 
       <a href="#">Two</a> 
       <a href="#">Three</a> 
     </span> 
    </li> 
    <li><a href="#">Responsibility</a> 
     <span> 
       <a href="#">One</a> 
       <a href="#">Two</a> 
     </span> </li> 
    <li><a href="#">Contact</a></li> 
    </ul> 

的100％，我有我這樣的導航欄。 它顯示這樣的：

我要的是：

我怎樣才能做到這一點？當我嘗試width:100%;爲跨度它走出裏，並使每個跨度一個到ul的寬度。

Answer 1

像其他人所說的CSS，簡單地改變你的跨度和你的錨標記display: block將解決眼前的問題。

li:hover span, li:hover span a { 
 
    display: block; 
 
} 
 

 
* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
} 
 

 
body { 
 
    background: blue; 
 
} 
 

 
ul { 
 
    list-style: none; 
 
    background-color: black; 
 
    height: 40px; 
 
    display: flex; 
 
} 
 

 
ul li { 
 
    position: relative; 
 
    line-height: 40px; 
 
    width: 20%; 
 
    text-align: center; 
 
} 
 

 
a { 
 
    color: white; 
 
    text-decoration: none; 
 
} 
 

 
span, span a { 
 
    display: none; 
 
} 
 

 
span { 
 
    position: absolute; 
 
    width: 100%; 
 
} 
 

 
span a { 
 
    border-bottom: 1px solid black; 
 
    text-align: center; 
 
} 
 

 
li:hover, span { 
 
    background: red; 
 
}

<ul> 
 
    <li><a href="#">Home</a></li> 
 
    <li><a href="#">About</a> 
 
    <span> 
 
       <a href="#">One</a> 
 
       <a href="#">Three</a> 
 
       <a href="#">Four</a> 
 
     </span> 
 
    </li> 
 
    <li><a href="#">Services</a> 
 
    <span> 
 
       <a href="#">One</a> 
 
       <a href="#">Two</a> 
 
       <a href="#">Three</a> 
 
     </span> 
 
    </li> 
 
    <li><a href="#">Responsibility</a> 
 
    <span> 
 
       <a href="#">One</a> 
 
       <a href="#">Two</a> 
 
     </span> </li> 
 
    <li><a href="#">Contact</a></li> 
 
</ul>

這是因爲跨度是自然不填充寬度的它的父一個內嵌元素。當您將其更改爲display: block時，您告訴它的行爲類似於塊元素，該元素填充其父項的寬度。

Answer 2

請試試這個：

span{ 
    display:block; 
} 

Demo

Answer 3

請嘗試以下方式

li span {display:block; width: 100%; overflow: hidden;} 
li span a{display: inline-block; float:left;} 

Answer 4

可以顯示加：塊跨度，或使其更正確和變化它代替了像div這樣的塊元素。在內聯元素中嵌套嵌套和塊元素是一種不好的做法。你可以嘗試這樣的

<li><a href="#">About</a> 
    <div> 
      <a href="#">One</a> 
      <a href="#">Three</a> 
      <a href="#">Four</a> 
    </div> 
</li> 

li div a { 
     width: 100%; 
     display: block; 
     box-sizing: border-box; 
     padding: 20px; 
}