使div適應邊界？

所以我有以下HTML/CSS代碼使div適應邊界？

* { 
 
    box-sizing: border-box; 
 
} 
 

 
.mainlink { 
 
    font-family: "Source Sans Pro", sans-serif; 
 
    font-size: 30px; 
 
    color: rgba(255,0,0,0.7); 
 
    transition: 0.3s ease-in-out; 
 
    text-decoration: none; 
 
    padding: 10px; 
 
} 
 

 
.mainbtn { 
 
    transition: 0.3s ease-in-out; 
 
    border: 1px solid rgba(255,0,0,1); 
 
    width: 40%; 
 
    position: relative; 
 
    margin: auto; 
 
    height: auto; 
 
} 
 

 
div.content { 
 
    position: absolute; 
 
    transform: translate(-1px,1px); 
 
    width: 100%; 
 
} 
 

 
.content a { 
 
    font-family: "Source Sans Pro", sans-serif; 
 
    font-size: 22px; 
 
    color: rgba(255,0,0,0.7); 
 
    display: block; 
 
    list-style: none; 
 
    background-color: #eee; 
 
    transition: 0.2s ease-in-out; 
 
    cursor: pointer; 
 
    text-decoration: none; 
 
    padding: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="mainbtn"> 
 
    <a href="#" class="mainlink">Hello</a> 
 
    <div class="content"> 
 
    <a href="#">World</a> 
 
    <a href="#">You</a> 
 
    <a href="#">Me</a> 
 
    </div> 
 
</div>

這個小練習的目標是創建一個下拉菜單。因此，懸停在「Hello」和div與class =「mainbtn」之上應該展開鏈接列表（我沒有看到動畫和轉換，因爲這不是問題的一部分）。問題是div中class =「content」的鏈接並沒有將class =「mainbtn」的所有div擴展到div的邊界。起初，我認爲一個簡單的盒子尺寸：邊框會解決這個問題，但事實並非如此。任何想法如何我可以使div class =「content」和其中的鏈接具有整個div的寬度與class =「mainbtn」加邊框？

來源

2017-01-22 Lukeception

喜歡這個？ http://codepen.io/anon/pen/bgWxZb –

你的意思是'content'應該和'mainbtn'的邊框重疊？ – LGSon

我發現如果您包裝應該出現在ul標記中的鏈接，則更容易進行自定義下拉菜單。

在這種fiddle我加入了mainlink錨標記爲content格，然後裹在ul標籤中的其他環節與周圍的錨標記li標籤，像這樣：

<div class="mainbtn"> 
    <div class="content"> 
     <a href="#" class="mainlink">Hello</a> 
     <ul> 
      <li><a href="#">World</a></li> 
      <li><a href="#">You</a></li> 
      <li><a href="#">Me</a></li> 
     </ul> 
    </div> 
</div>

然後我用下面的CSS實現你在小提琴中看到的結果。

.content ul { 
    display: none; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 

.content .mainlink:hover ~ ul, 
.content .mainlink ~ ul:hover { 
    display: block; 
}

我也參加了邊境從mainbtn類，並把它放在content類，所以下拉出現時的邊界將擴大。你可以在這裏看到這個updated fiddle。

.mainbtn { 
    transition: 0.3s ease-in-out; 
    width: 40%; 
    position: relative; 
    margin: auto; 
    height: auto; 
} 

div.content { 
    position: absolute; 
    transform: translate(-1px,1px); 
    width: 100%; 
    border: 1px solid rgba(255,0,0,1); 
}

來源

2017-01-22 22:28:56 Matthew

請參閱下小提琴：https://jsfiddle.net/q9k87f5c/

這可能是最起碼的設置，我能想到的...修復css來滿足您的需求。

<div class="items"> 
    <div class="item"> 
    Hello 
    <div class="items"> 
    <div class="item">World</div> 
    </div> 
    </div> 
</div> 

.item{ 
    position:relative; 
} 
.item .items{ 
    display:none; 
} 
.item:hover .items{ 
    display:block; 
    position:absolute; 
}

基本思想是在嵌套項目的懸停顯示上添加一個。這些都隱藏在第一位...

來源

2017-01-22 22:50:49 levi

使div適應邊界？

回答

相關問題