2017-05-27 5 views
0

Wie kann ich den Abstand zwischen zwei Floating-Elementen außer dem negativen Rand entfernen? Ich habe den Code auch auf jfidle gesetzt, weil man das Fenster hier nicht verschieben kann, so dass es verzerrt ist. https://jsfiddle.net/60cfz3wy/ Platz zwischen zwei Floating-Elementen entfernen

.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>

ich es tun, indem schwimmend, weil, wenn ich nav die Hintergrundfarbe schwebte nur hatte zu der nav betroffen, obwohl es zu div zugeschrieben wird, die unten ist.

Weiß jemand, wie man das löst? Danke für die Antworten.

Antwort

0

Sie können versuchen display: inline-block statt schwimmt, tut es auch gut.

über Ihr Problem Sprechen, versuchen zu machen #primary_nav_wrap ul { margin: 0;} As ‚ul‘ Standardränder hat, haben Sie die Räume hier

+0

ich wahrscheinlich völlig verstehen Artikel nicht. Ich versuchte diese Änderung https://jsfiddle.net/60cfz3wy/2/ und ich versuchte auch #primary_nav_wrap ul {margin: 0;}, aber nichts passierte. Wo ist das Problem? –

Verwandte Themen