2017-05-27 70 views
0

如何除去2個浮動元素之間的空間(負邊界除外)? 我把代碼也放在jfidle上,因爲在這裏你不能移動窗口,所以它是失真的。 https://jsfiddle.net/60cfz3wy/ 刪除2個浮動元素之間的空間

.pozadi{ 
 
\t border-top-right-radius: 50px; 
 
\t background: #D8E7ED; 
 
\t height: 100%; 
 
\t float: right; 
 
\t width: 70%; 
 
} 
 
#primary_nav_wrap{ 
 
\t float: left; 
 
\t margin: 0; 
 
\t z-index: 1; 
 
} 
 
#primary_nav_wrap ul 
 
{ 
 
\t list-style:none; 
 
\t padding:0; 
 
\t margin-top:0; 
 
} 
 

 
#primary_nav_wrap ul a 
 
{ 
 
\t display:block; 
 
\t font-size:20px; 
 
\t font-weight: 600; 
 

 
} 
 
#primary_nav_wrap ul li 
 
{ 
 
\t font-size: 20px; 
 
\t position:relative; 
 
\t font-weight: 600; 
 
\t border-bottom: 1px solid white; 
 
} 
 
#primary_nav_wrap ul ul 
 
{ 
 
\t display:none; 
 
\t position:absolute; 
 
\t top: 0%; 
 
\t left: 100%; 
 
\t background: #7ea7b1; 
 
\t border-bottom-right-radius: 15px; 
 

 
} 
 
#primary_nav_wrap ul ul li 
 
{ 
 
\t text-align: left; 
 
\t width: 150px; 
 
\t padding: 10px 20px 10px 20px; 
 
} 
 
} 
 
#primary_nav_wrap ul ul li:hover{ 
 
\t background: white; 
 
} 
 

 
#primary_nav_wrap ul ul a 
 
{ 
 
\t line-height:120%; 
 
} 
 

 
#primary_nav_wrap ul ul ul 
 
{ 
 
\t top:0; 
 
\t left:100% 
 
} 
 

 
#primary_nav_wrap ul li:hover > ul 
 
{ 
 
\t 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"> 
 
\t <ul> 
 
\t \t <a href="index.html"><li class="tlacitka" style="border-top-left-radius: 15px;">Domů</li></a> 
 
\t \t <a href="prodej.html"><li class="tlacitka">Prodej kompresorů</a> 
 
\t \t \t <ul> 
 
\t \t \t \t <a href="#"><li>kompresory CompAir</li></a> 
 
\t \t \t \t <a href="#"><li>Kompresory Gardner Denver</li></a> 
 
\t \t \t \t <a href="#"><li>foto + ostatní</li></a> 
 
\t \t \t </ul> 
 
\t \t </li> 
 
\t \t <a href="opravy.html"><li class="tlacitka">Opravy kompresorů</a> 
 
\t \t <ul> 
 
\t \t \t \t <a href="#"><li>GO kompresorů</li></a> 
 
\t \t \t \t <a href="#"><li>Go turbokopresorů</li></a> 
 
\t \t \t \t <a href="#"><li>Repase šroubových bloků</li></a> 
 
\t \t \t \t <a href="#"><li>Repase dmychadel a vývěv</li></a> 
 
\t \t \t \t <a href="#"><li>Foto + ostatní</li></a> 
 
\t \t \t </ul> 
 
\t \t </li> 
 
\t \t <a href="kontakt.php"><li class="tlacitka" style=" border-bottom-left-radius: 15px; border-bottom: none;">Kontakt</li></a> 
 
\t </ul> 
 
\t </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>

我通過浮動,因爲當我只有資產淨值浮動的背景顏色受到太大,即使它是由於DIV是低於資產淨值做。

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

回答

0

你可以嘗試display: inline-block而不是浮動,它也可以。

談到您的問題,儘量讓#primary_nav_wrap ul { margin: 0;} 作爲「UL」有默認邊距,你在這裏

+0

的空間我大概didn't完全理解。我試過這個變化https://jsfiddle.net/60cfz3wy/2/,我也試過#primary_nav_wrap ul {margin:0;},但沒有發生任何事情。問題在哪裏? –