刪除2個浮動元素之間的空間

Question

如何刪除除負邊距之外的2個浮動元素之間的空間？ 我將代碼也放在jfidle上，因為在這里您無法移動窗口，因此窗口會變形。 https://jsfiddle.net/60cfz3wy/

 .pozadi{ border-top-right-radius: 50px; background: #D8E7ED; height: 100%; float: right; width: 70%; } #primary_nav_wrap{ float: left; margin: 0; z-index: 1; } #primary_nav_wrap ul { list-style:none; padding:0; margin-top:0; } #primary_nav_wrap ul a { display:block; font-size:20px; font-weight: 600; } #primary_nav_wrap ul li { font-size: 20px; position:relative; font-weight: 600; border-bottom: 1px solid white; } #primary_nav_wrap ul ul { display:none; position:absolute; top: 0%; left: 100%; background: #7ea7b1; border-bottom-right-radius: 15px; } #primary_nav_wrap ul ul li { text-align: left; width: 150px; padding: 10px 20px 10px 20px; } } #primary_nav_wrap ul ul li:hover{ background: white; } #primary_nav_wrap ul ul a { line-height:120%; } #primary_nav_wrap ul ul ul { top:0; left:100% } #primary_nav_wrap ul li:hover > ul { display:block } .tlacitka { background-color: lightblue; padding: 10px 20px 10px 20px; } .tlacitka:hover { background: white; color: black; text-decoration: none; } 

 <nav id="primary_nav_wrap"> <ul> <a href="index.html"><li class="tlacitka" style="border-top-left-radius: 15px;">Domů</li></a> <a href="prodej.html"><li class="tlacitka">Prodej kompresorů</a> <ul> <a href="#"><li>kompresory CompAir</li></a> <a href="#"><li>Kompresory Gardner Denver</li></a> <a href="#"><li>foto + ostatní</li></a> </ul> </li> <a href="opravy.html"><li class="tlacitka">Opravy kompresorů</a> <ul> <a href="#"><li>GO kompresorů</li></a> <a href="#"><li>Go turbokopresorů</li></a> <a href="#"><li>Repase šroubových bloků</li></a> <a href="#"><li>Repase dmychadel a vývěv</li></a> <a href="#"><li>Foto + ostatní</li></a> </ul> </li> <a href="kontakt.php"><li class="tlacitka" style=" border-bottom-left-radius: 15px; border-bottom: none;">Kontakt</li></a> </ul> </nav> <div class="pozadi"> <div class="l"> <p >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer egestas, ante et imperdiet iaculis, ligula diam suscipit ante, vel mattis est arcu sit amet arcu. Nullam tincidunt, nulla id gravida consequat, mi mi mattis libero, eget lobortis justo justo at orci. Sed pulvinar interdum mauris dignissim gravida. Aliquam erat volutpat. Integer varius, lorem vestibulum congue feugiat, magna orci mollis sapien, nec semper erat neque eget urna. Maecenas elementum tellus in dolor tristique porttitor. Nullam quis quam diam. Proin tempus pretium ante, ut lacinia tellus efficitur ac. Hi i am bla bal short text feugiat pellentesque quam id ultrices. Nulla tincidunt auctor felis ac pellentesque. </p> </div> <div class="p"> <p >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer egestas, ante et imperdiet iaculis, ligula diam suscipit ante, vel mattis est arcu sit amet arcu. Nullam tincidunt, nulla id gravida consequat, mi mi mattis libero, eget lobortis justo justo at orci. Sed pulvinar interdum mauris dignissim gravida. Aliquam erat volutpat. Integer varius, lorem vestibulum congue feugiat, magna orci mollis sapien, nec semper erat neque eget urna. Maecenas elementum tellus in dolor tristique porttitor. Nullam quis quam diam. Proin tempus pretium ante, ut lacinia tellus efficitur ac. Pellentesque feugiat pellentesque quam id ultrices. Nulla tincidunt auctor felis ac pellentesque. </p> </div> </div> 

我通過浮動來執行此操作，因為當我只有nav浮動時，背景顏色也影響了nav，即使它歸因於下面的div。

有誰知道如何解決這個問題？ 感謝您的回答。

Answer 1

您可以嘗試display: inline-block而不是浮動，效果也不錯。

說到您的問題，請嘗試使#primary_nav_wrap ul { margin: 0;}由於'ul'具有默認邊距，因此您在此處留有空格