0
Ich würde gerne eine nav und eine div mit mehreren Tasten auf der gleichen "Linie", indem Sie die nav zentriert. Ich kann jedoch kein zufriedenstellendes Ergebnis erzielen. Wenn ich meine div nach dem nav setzen, wird die div auf der rechten Seite angezeigt, aber unter dem nav, aufgrund der folgenden CSS Aussagen teil:Rendern Sie ein div auf der rechten Seite und halten Sie das Nav zentriert
header {
position: relative;
width: 100%
background: #333;
}
nav {
position: relative;
margin: 0 auto;
}
Wenn ich das headerwidth Attribut entfernen und die navfloat zu der left, dann verliere ich die zentrierte Position meiner nav. Hier
ist der HTML-Code:
<div class='header'>
<div class='header-content'>
<div class='welcome-div'>
<h1>
Hello
</h1>
<header>
<nav id='drop-down-menu'>
<div class="button"></div>
<ul>
<li class='active'><a href='#'>HOME</a></li>
<li><a href='#'>ABOUT</a></li>
<li><a href='#'>PRODUCTS</a>
<ul>
<li><a href='#'>Product 1</a>
<ul>
<li><a href='#'>Sub Product</a></li>
<li><a href='#'>Sub Product</a></li>
</ul>
</li>
<li><a href='#'>Product 2</a>
<ul>
<li><a href='#'>Sub Product</a></li>
<li><a href='#'>Sub Product</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>BIO</a></li>
<li><a href='#'>VIDEO</a></li>
<li><a href='#'>GALLERY</a></li>
<li><a href='#'>CONTACT</a></li>
</ul>
</nav>
<div class='lang'>
<a class='hover-fade'>Français</a>
<a class='hover-fade'>English</a>
<a class='hover-fade'>日本語</a>
</div>
</header>
</div>
</div>
</div>
<div class='clear'/>
Die CSS ein:
* {
margin: 0;
padding: 0;
text-decoration: none;
}
header {
position: relative;
width: 100%
background: #333;
}
nav {
position: relative;
margin: 0 auto;
}
#drop-down-menu,
#drop-down-menu ul,
#drop-down-menu ul li,
#drop-down-menu ul li a,
#drop-down-menu
#head-mobile {
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
z-index: 1;
}
#drop-down-menu:after,
#drop-down-menu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0
}
#drop-down-menu
#head-mobile {
display: none
}
#drop-down-menu {
font-family: sans-serif;
background: #333
}
#drop-down-menu > ul > li {
display:inline-block;
position: relative;
}
#drop-down-menu > ul {
text-align: center;
}
#drop-down-menu > ul > li > a {
padding: 17px;
font-size: 12px;
letter-spacing: 1px;
text-decoration: none;
color: #ddd;
font-weight: 700;
}
#drop-down-menu > ul > li:hover > a,
#drop-down-menu ul li.active a {
color: #fff
}
#drop-down-menu > ul > li:hover,
#drop-down-menu ul li.active:hover,
#drop-down-menu ul li.active,
#drop-down-menu ul li.has-sub.active:hover {
background: #448D00 !important;
-webkit-transition: background .3s ease;
-ms-transition: background .3s ease;
transition: background .3s ease;
}
#drop-down-menu > ul > li.has-sub > a {
padding-right: 30px
}
#drop-down-menu > ul > li.has-sub > a:after {
position: absolute;
top: 22px;
right: 11px;
width: 8px;
height: 2px;
display: block;
background: #ddd;
content: ''
}
#drop-down-menu > ul > li.has-sub > a:before {
position: absolute;
top: 19px;
right: 14px;
display: block;
width: 2px;
height: 8px;
background: #ddd;
content: '';
-webkit-transition: all .25s ease;
-ms-transition: all .25s ease;
transition: all .25s ease
}
#drop-down-menu > ul > li.has-sub:hover > a:before {
top: 23px;
height: 0
}
#drop-down-menu ul ul {
position: absolute;
left: -9999px
}
#drop-down-menu ul ul li {
height: 0;
-webkit-transition: all .25s ease;
-ms-transition: all .25s ease;
background: #333;
transition: all .25s ease
}
#drop-down-menu ul ul li:hover {
}
#drop-down-menu li:hover > ul {
left: auto
}
#drop-down-menu li:hover > ul > li {
height: 35px
}
#drop-down-menu ul ul ul {
margin-left: 100%;
top: 0
}
#drop-down-menu ul ul li a {
border-bottom: 1px solid rgba(150,150,150,0.15);
padding: 11px 15px;
width: 170px;
font-size: 12px;
text-decoration: none;
color: #ddd;
font-weight: 400;
}
#drop-down-menu ul ul li:last-child > a,
#drop-down-menu ul ul li.last-item > a {
border-bottom: 0
}
#drop-down-menu ul ul li:hover > a,
#drop-down-menu ul ul li a:hover {
color: #fff
}
#drop-down-menu ul ul li.has-sub > a:after {
position: absolute;
top: 16px;
right: 11px;
width: 8px;
height: 2px;
display: block;
background: #ddd;
content: ''
}
#drop-down-menu ul ul li.has-sub > a:before {
position: absolute;
top: 13px;
right: 14px;
display: block;
width: 2px;
height: 8px;
background: #ddd;
content: '';
-webkit-transition: all .25s ease;
-ms-transition: all .25s ease;
transition: all .25s ease
}
#drop-down-menu ul ul > li.has-sub:hover > a:before {
top: 17px;
height: 0
}
#drop-down-menu ul ul li.has-sub:hover,
#drop-down-menu ul li.has-sub ul li.has-sub ul li:hover {
background: #363636;
}
#drop-down-menu ul ul ul li.active a {
border-left: 1px solid #333
}
#drop-down-menu > ul > li.has-sub > ul > li.active > a,
#drop-down-menu > ul ul > li.has-sub > ul > li.active > a {
border-top: 1px solid #333
}
.hover-fade:hover, .hover-fade:focus, .hover-fade:active {
background-color: #2098D1;
color: white;
}
.hover-fade {
display: inline-block;
vertical-align: middle;
font-family: 'Roboto', sans-serif;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
overflow: hidden;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: color, background-color;
transition-property: color, background-color;
margin: .1em;
padding: .5em;
cursor: pointer;
background: #e1e1e1;
background-color: rgb(225, 225, 225);
text-decoration: none;
color: #666;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
width: 100%;
margin: 0;
padding: 0;
min-width: 1200px;
background-color: #111;
}
.header {
float: left;
min-width: 100%;
background-color: #333;
}
.header-content {
color: #ffffff;
}
.welcome-div {
text-align: center;
}
.welcome-div h1 {
padding: 1.5em;
vertical-align: middle;
font-family: 'Helvetica Neue', sans-serif;
font-size: 46px;
font-weight: 500;
line-height: 10px;
letter-spacing: 1px;
}
.lang {
float: right;
padding: 0.5em;
}
.content {
padding: 2em 0 2em 0;
margin-left: auto;
margin-right: auto;
width: 60%;
}
.box {
position: relative;
width: 80%;
margin: 0 auto;
color: #ffffff;
}
.box h1 {
padding: 0.5em 0 0.5em 0;
font-family: 'Graduate', sans-serif;
font-size: 36px;
font-weight: 600;
letter-spacing: 1px;
text-align: center;
background-color: #448D00;
}
.clear {
clear: both;
}
Und ein JSFiddle sample.
Ich möchte das gleiche Layout beibehalten, aber mit den 3 Tasten mit der nav ausgerichtet.
Vielen Dank für Ihre Antworten.
Ihre Lösung funktioniert nur, wenn die Differenz zwischen der Breite des Körpers und Breite-Menü größer als das Doppelte der Breite des lang Menüs ist. Ist dies nicht der Fall, überschneiden sich die beiden Menüs. Außerdem ist das lang-Menü nicht vertikal mit dem Hauptmenü zentriert. Wenn das Menü umbrochen wird, bleibt das lang-Menü also nach oben ausgerichtet. Es wäre besser gewesen, über das Problem der Reaktionsfähigkeit des aktuellen Layouts zu beraten und möglicherweise eine Flexbox-basierte Lösung bereitzustellen, die sich auf schmalen Bildschirmen elegant verschlechtern könnte. Insgesamt ist Ihre Lösung eine schnelle Lösung, ohne die wirklichen Probleme des aktuellen Layouts zu berühren. –
Bitte denken Sie daran, dass [der Zweck] auch zukünftigen Lesern hilft, nicht nur dem OP. Dies ist kein * "Fix das für mich kostenlos, bitte" * Art der Gemeinschaft. Wir sind bestrebt, qualitativ hochwertige Lösungen anzubieten, die unabhängig vom aktuellen Beispielinhalt gelten. Der Schwerpunkt sollte darauf liegen, das Prinzip zu erklären und zu erklären, warum die Lösung funktioniert und welche Vorteile der Einsatz einer Methode gegenüber der anderen hat. Ich habe diese Kommentare in der Absicht gemacht, Ihnen zu helfen, bessere Antworten zu geben, von denen Sie sicher sind und können. –