2017-04-08 13 views
0

Ich versuche, Googles Homepage zu klonen. Ich begann von der Fußzeile der Seite und blieb bei der Ausrichtung der Links in der Fußzeile stecken.Ausrichtung von Links in Fußzeile

mein HTML-Code:

<div class="footer"> 
<hr > 
<footer > 
    <a href="" class="advertising">Advertising</a> 
    <a href="" class="business">Business</a> 
    <a href="" class="about">About</a> 
    <a href="" class="privacy">Privacy</a> 
    <a href="" class="terms">Terms</a> 
    <a href="" class="settings">Settings</a> 
</footer> 
</div> 

mein CSS-Code:

.footer{ 
position: absolute; 
bottom: 0; 
left: 0; 
width: 100% 
} 

footer{ 
    background-color: #F4F6F7; 
    height: 45px; 



} 

hr{ 
    border-color: #CCD1D1; 
    margin-bottom: 0px; 
} 

.advertising, .business, .about, .privacy, .terms, .settings{ 
    color: #909497; 
    font-size: 1.2em; 
    margin-top: 11px;    //THIS LINE. 


} 

.advertising, .business, .about{ 
    margin-left: 40px; 
} 


.privacy, .terms, .settings{ 
    margin-right: 40px; 
    float: right; 

} 

kann mir jemand sagen, warum die Zeile "margin-top: 11px" zu den ersten 3 Links nicht angewandt wird, in die Fußzeile (Werbung, Geschäft, ungefähr). Screenshot der Fußzeile: Screenshot of footer:

+0

Überprüfen Sie meine Antwort unten. – cosmoonot

Antwort

0

Sie müssen float:left auf Ihre ersten drei Links hinzufügen, wie Sie float:right auf den letzten drei angewendet haben.

.advertising, .business, .about{ 
    margin-left: 40px; 
    float:left; 
} 
+0

'float: left' hat die Arbeit getan. Danke. Aber ich war nicht in der Lage, den Grund dafür zu verstehen. Warum würde Top-Marge von Float-Eigenschaft abhängen? –

+0

@ArpitBanati Siehe diesen Artikel: https://www.sitepoint.com/web-foundations/floating-clearing-css/ Auch, gib mir eine Stimme. – cosmoonot

0

Ich lief es durch codepen, es funktionierte, als ich die Marge 11px auf alle Elemente mit der Fußzeile als

Selektor angewendet

Ich würde auch empfehlen Flexbox verwenden, seine viel einfacher zu bedienen, ist hier ein Beispiel

`http://codepen.io/HTMLanto/pen/gmNedQ` 

Prost!

0

Obwohl die obige Antwort funktioniert, eine bessere Lösung ist folgendes:

.footer { 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 100% 
 
} 
 

 
footer { 
 
    background-color: #F4F6F7; 
 
    height: 45px; 
 
} 
 

 
hr { 
 
    border-color: #CCD1D1; 
 
    margin-bottom: 0px; 
 
} 
 

 
.align-left { 
 
    float: left; 
 
} 
 

 
.align-right { 
 
    float: right; 
 
} 
 

 
.footer-links { 
 
    list-style-type: none; 
 
} 
 

 
.footer-links li { 
 
    display: inline; 
 
} 
 

 
.footer-links li a { 
 
    color: #909497; 
 
    font-size: 1.2em; 
 
    margin: 11px 20px 0px; 
 
}
<div class="footer"> 
 
    <hr/> 
 
    <footer> 
 
    <ul class="footer-links align-left"> 
 
     <li><a href="#">Advertising</a></li> 
 
     <li><a href="#">Business</a></li> 
 
     <li><a href="#">About</a></li> 
 
    </ul> 
 
    <ul class="footer-links align-right"> 
 
     <li><a href="#">Privacy</a></li> 
 
     <li><a href="#">Terms</a></li> 
 
     <li><a href="#">Settings</a></li> 
 
    </ul> 
 
    </footer> 
 
</div>

Durch die Links in separaten Menüs setzen, ermöglicht es Ihnen sehr schnell hinzuzufügen und zu entfernen Links in der Zukunft, ohne mit CSS-Klassen herumzuspielen.

Das behebt alle Marginfehler, die Sie ebenfalls haben, da wir ankündigen, dass jedes Anchor-Tag einen Margin-Top von 11px hat. Sie werden auch bemerken, dass Sie nicht mehr 40px Rand-links und Rand-rechts haben, sondern jede Seite auf 20px eingestellt haben, was den gleichen Effekt ergibt.

Sie können auch die Klassen .align-left und .align-right an anderer Stelle in Ihrem HTML verwenden, anstatt sie für jede Klasse in CSS zu deklarieren.

Es gibt keine Notwendigkeit, jedem Link seine eigene Klasse zu geben, wenn alle denselben Stil haben. Wenn Sie jedoch einen bestimmten Link markieren möchten, fügen Sie einfach eine .highlight-Klasse zu einem der Anchor-Tags hinzu und legen Sie den Stil in CSS fest.

Diese Methode bietet auch vollständige Browserunterstützung. Flexbox ist ein wenig temperamentvoll auf IE, wie ich dies schreibe.

Hoffe, das hilft!

Verwandte Themen