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>

我是通过浮动来做的，因为当我只有浮动时，背景颜色会影响导航，即使它归因于下面的div。

有谁知道如何解决这个问题？谢谢你的回答。

Answer 1

您可以尝试使用display: inline-block代替浮点数，它也可以。

说到您的问题，请尝试制作#primary_nav_wrap ul { margin: 0;} 由于'ul'具有默认边距，因此您有空格

删除2个浮动元素

1 个答案: