我如何 position 僅比其父級低一個 div，但將其他 div 保持在同一位置？
[英]How do I position just one div below its parent, but keep the other divs in the same spot?
問題描述
因此，我正在創建一個導航欄，並且我希望“計算器”鏈接在您通過 hover 時也有一個下拉菜單。 如您所見，當您通過計算器鏈接進行 hover 時，它看起來非常奇怪。 出於某種原因，下拉菜單的“第一個、第二個和第三個選項”鏈接並排顯示在頂部，因此它們會更改“主頁”按鈕的 position。 如何使鏈接僅顯示在其父 div 下方，並將其他所有內容保持在同一行？
這是代碼。 Hover 在“計算器”按鈕上，看看我的意思。 這三個鏈接如何進入“計算器”按鈕下方的下拉菜單。
<body> <div class = "menu"><div id = "icon">The Orange Calculator</div> <a id = "contact">Contact</a> <a id = "help">Help</a> <div style = "display: inline" class = "dropdown"> <a class = "calc">Calculators</a> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> <a id = "home">Home</a></div> </body> <style> body { margin: 0; }.dropdown:hover.dropdown-content { display: inline; }.dropdown-content { display:none; }.menu { border-bottom: 2px solid #FF7800; //border-image: linear-gradient(to right, white, #FF7800, white); //border-image-slice: 1; width: 100%; font-size: 17px; font-family: Arial; line-height: 100px; } a { float: right; width: 12%; height: 100; text-align: center; color: #5F5F5F; transition: color 0.4s; } a:hover { color: #FF7800; cursor: pointer; } #home { background-color: #FF7800; color: #FFF; display: inline-block; } #icon { display: inline; margin-left: 10; font-size: 35 } </style>
2 個解決方案
解決方案1
1 已采納 2020-06-14 03:37:28
您可以使用position:absolute; 相對於其父 div dropdown ，並且由於您使用浮點數來調整元素，因此我也嘗試使用浮點數來實現這一點，但是您可以使用 css flexbox 來實現這一點，這是一種更好的方法。 請嘗試以下 css
body { margin: 0; }.dropdown { position: relative; width: 12%; float: right; text-align: center; }.dropdown:hover.dropdown-content { visibility: visible; opacity: 1; }.dropdown-content { visibility: Hidden; opacity: 0; position: absolute; top: 100%; left: 0; width: 200px; height: auto; padding: 10px; display: block; border: 1px solid #ccc; padding: 15px; }.dropdown a { float: none; }.dropdown-content a { width: 100%; display:block; margin: 4px 0; }.menu { border-bottom: 2px solid #ff7800; //border-image: linear-gradient(to right, white, #FF7800, white); //border-image-slice: 1; width: 100%; font-size: 17px; font-family: Arial; line-height: 100px; } a { float: right; width: 12%; height: 100; text-align: center; color: #5f5f5f; transition: color 0.4s; } a:hover { color: #ff7800; cursor: pointer; } #home { background-color: #ff7800; color: #fff; display: inline-block; } #icon { display: inline; margin-left: 10; font-size: 35; }
<body> <div class="menu"> <div id="icon">The Orange Calculator</div> <a id="contact">Contact</a> <a id="help">Help</a> <div style="display: inline" class="dropdown"> <a class="calc">Calculators</a> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> <a id="home">Home</a> </div> </body>
希望這可以解決您的問題。
解決方案2
1 2020-06-14 03:46:12
我建議您使用flexbox而不是浮動
<body> <div class="menu"> <div class="header"> <p>The Orange Calculator</p> </div> <div class="navbar"> <div class="link-navigation home"> <a href="#" alt="home">Home</a> </div> <div class="dropdown"> <p class="calc link-navigation">Calculators</p> <div class="dropdown-content"> <a href="#" alt="link-1">Link 1</a> <a href="#" alt="link-2">Link 2</a> <a href="#" alt="link-3">Link 3</a> </div> </div> <div class="link-navigation"> <a href="#" alt="help">Help</a> </div> <div class="link-navigation"> <a href="#" alt="contact">Contact</a> </div> </div> </div> </body> <style> body { margin: 0; }.menu { border-bottom: 2px solid #FF7800; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; }.header, .header > p, .navbar, .dropdown, .link-navigation, .dropdown-content { display: inline-block; }.link-navigation { cursor: pointer; font-size: 17px; padding: 50px 20px; }.link-navigation.home { background-color: #FF7800; color: #FFF; }.link-navigation > a, .dropdown-content > a { color: #5F5F5F; text-decoration: none; }.header { margin: auto 0; }.header > p { font-size: 17px; margin: 0; }.dropdown-content > a { display: block; padding: 20px; } a:hover, .calc:hover { color: #FF7800; transition: color 0.4s; }.home > a { color: #fff; }.dropdown >.calc.link-navigation { margin: 0; }.dropdown-content { display: none; }.dropdown:hover.dropdown-content { display: block; position: absolute; z-index: 99; padding: 0 20px; } </style>
您可以在CSS-Tricks中閱讀有關 CSS Flexbox 的更多信息
如何拖動div並將光標保持在單擊它的位置上？
[英]How can I drag a div and keep the cursor on the same spot as I clicked it at?
如何在頁面的其余部分滾動時保持div卡在同一位置？
[英]How to keep a div stuck in the same spot while the rest of page is scrolled?
如何設置一個 div 的間隔和其他 div 的停用間隔？
[英]How do I set interval for one div and deactive interval for other divs?
在同一頁面上添加兩個div，每個div包含一個鏈接，該鏈接隱藏其父div並顯示另一個
[英]Add two divs on the same page, each containing a link which hides it's parent div and shows the other one
如何讓jQuery只修改一個div，而不是同一個類的所有div？
[英]How do I make jQuery modify only one div, instead of all divs of the same class?
當隱藏HTML左邊的HTML div時，如何保持HTML div不移動？
[英]How do I keep an HTML div from moving when the one to its left is hidden?
parent div中的onclick和另一個div中參數化的function同時被觸發。 我如何防止父母解雇？
[英]The onclick in the parent div and the parameterized function in the other div are triggered at the same time. How do I prevent the parent from firing?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
將div放在同一位置
如何根據距其他股利的百分比來確定股利的位置？
如何拖動div並將光標保持在單擊它的位置上？
如何在頁面的其余部分滾動時保持div卡在同一位置？
如何設置一個 div 的間隔和其他 div 的停用間隔？
在同一頁面上添加兩個div，每個div包含一個鏈接，該鏈接隱藏其父div並顯示另一個
如何在某些父div中附加這些嵌套的div
如何讓jQuery只修改一個div，而不是同一個類的所有div？
當隱藏HTML左邊的HTML div時，如何保持HTML div不移動？
parent div中的onclick和另一個div中參數化的function同時被觸發。 我如何防止父母解雇？
相關標簽