我如何 position 仅比其父级低一个 div，但将其他 div 保持在同一位置？
[英]How do I position just one div below its parent, but keep the other divs in the same spot?
问题描述
So, I'm creating a navigation bar, and I want the "Calculators" link to also have a dropdown menu when you hover over it.
因此，我正在创建一个导航栏，并且我希望“计算器”链接在您通过 hover 时也有一个下拉菜单。 As you can see, it looks super weird when you hover over the calculators link.如您所见，当您通过计算器链接进行 hover 时，它看起来非常奇怪。 The links "1st, 2nd, and 3rd option" for the dropdown menu appear side by side on the top for some reason, and because of that they change the position of the "Home" button.出于某种原因，下拉菜单的“第一个、第二个和第三个选项”链接并排显示在顶部，因此它们会更改“主页”按钮的 position。 How can I make just the links appear below its parent div, and keeping everything else on the same line?如何使链接仅显示在其父 div 下方，并将其他所有内容保持在同一行？
Here's the code.这是代码。 Hover over the "Calculators" button to see what I mean. Hover 在“计算器”按钮上，看看我的意思。 How do those three links into a dropdown menu below the "Calculators" button.这三个链接如何进入“计算器”按钮下方的下拉菜单。
<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
You can easily align your drop down div using position:absolute;您可以使用position:absolute; relative to its parent div dropdown and since you are using floats to adjust your elements I have also tried to achieve this using floats, but you can make this using css flexbox which is a far better approach.相对于其父 div dropdown ，并且由于您使用浮点数来调整元素，因此我也尝试使用浮点数来实现这一点，但是您可以使用 css flexbox 来实现这一点，这是一种更好的方法。 Please try the following css请尝试以下 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>
Hope this solves your problem.希望这可以解决您的问题。
解决方案2
1 2020-06-14 03:46:12
I recommend you use flexbox instead of float我建议您使用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>
You can read more about CSS Flexbox in CSS-Tricks您可以在CSS-Tricks中阅读有关 CSS Flexbox 的更多信息
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.