2017-05-27 81 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;},但没有发生任何事情。问题在哪里? –