Wie push Fußzeile unterhalb des Inhalts und display inline?

Diese Frage ist ein doppelte, aber es war nur eine Antwort (nicht akzeptiert und nicht bewertet), fast keine Diskussion, und die OP nicht berichten, wenn es das problem gelöst. Meine css verwendet den Vorschlag, und es löst nicht mein problem, was ich glaube ist das gleiche.

Habe ich ein nav-Spalte schwebte auf der linken Seite, und ein content-block (Abschnitt) schwebte linken gegen die nav bar. Dann habe ich ein footer-Abschnitt (das ist der html5). Ich bin versuchen, um eine footer-nav, ist inline.

Den footer-nav erscheint unterhalb des nav-Spalte, aber auf der linken Seite des Textes (die erstreckt sich über das nav-Spalte). Auch, es wird im block-format, nicht inline.

Html ist in etwa so: 

<nav>
  <ul>
    <li><a>...</a></li>
    ..
    ..
  </ul>
</nav>

<section>
...text...
</section>

<footer>
  <ul>
    <li><a>...</a></li>
    ..
    ..
  </ul>
</footer>

Und das css ist in etwa so:

nav {
  float: left;
  ..
  ..
}

section {
  float: left;
  ..
  ..
}

footer {
    clear: both;
}

footer li {
  display: inline;
}

Ist hier ein Beispiel.

http://jsfiddle.net/abalter/NdExx/2/

InformationsquelleAutor abalter | 2013-09-22
  1. 1

    Haben Sie mehrere CSS-Probleme, die behoben werden müssen.

    1. Sie verwenden eine Menge, absolute/relative Positionierung ohne wirkliche Notwendigkeit.
    2. Sie nicht angeben, welche herstellerspezifische wenn Sie gebraucht werden.
    3. Sie eine zusätzliche schließen-Armband in der CSS (am Ende).
    4. Sie haben eine doppelte Erklärung (seine harmlos, aber nervig).

    BTW, wenn Sie das fest CSS Sie werden sehen, dass die clear:both; plötzlich funktioniert.
    (es hat nicht funktioniert vor, weil der text-Abschnitt war absolut positioniert)
    auch: ich würde empfehlen, Sie zu umschließen, die & text-Abschnitt in einer div, so zwingt die <footer> für immer unter Ihnen, auch ohne Ausgleich.

    über Ihre inline-problem in der Fußzeile, obwohl die li Elemente festgelegt sind, um display:inline; alle von Ihnen enthält divs, so dass am Ende, Sie Verhalten sich wie block-Elemente.
    wie leicht zu beheben, ich habe die footer li - Selektor am Ende der CSS footer *, aber Sie sollten genau angeben, was Sie werden wollen inline.

    so, hier ist eine Geige zu demonstrieren, die änderungen.

    Feste CSS (+Vendor Besonderheiten, -Rechtschreibfehler, -Doppel-Erklärung)

    #background-image
{
    background: url(http://www.arielbalter.com/BuzzJoy/img/green_and_roasted_half_and_half.jpg);
    width: 100%;
    top: 0;
    left: 0;
    opacity: 0.6;
    position: fixed;
    background-repeat: repeat-y;
    padding: 0;
    margin: 0;
}

header
{
    width: 100%;
    padding: 0;
    margin: 0;
}

#buzz-joy-logo
{
    width: 100%;
    height: auto;
    top: 0%;
    position: relative;
    z-index: 2;
    display: block;
    padding: 0;
    margin: 0 auto 0 auto;
}

nav
{
    padding: 0;
    margin: 0 0 0 15%;
    float: left;
}

    nav li
    {
        display: inline;
    }

.nav-link
{
    position: relative;
    width: 10em;
    height: 5.3em;
    background-image: url(http://www.arielbalter.com/BuzzJoy/img/CoffeeCupNoSteam.png);
    display: block;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    text-align: center;
    margin: 0 0 1em 0;
    padding: 0;
    text-decoration: none;
}

    .nav-link:hover
    {
        color: DarkGoldenRod;
    }

.nav-cup-image
{
    height: 100px;
    width: auto;
    padding: 0;
    margin: 0;
}

.nav-text
{
    position: relative;
    color: Yellow;
    font-size: 1.5em;
    text-align: center;
    font-family: "GillSansUltraBoldCondensedRegular", sans-serif;
    font-weight: 100;
    margin: 0% 13% 0 0;
    padding: 0.6em 0em 10em 0;
}

    .nav-text:hover
    {
        color: DarkGoldenRod;
    }

#nav-list
{
    list-style-type: none;
    padding: 0;
}

.text-section
{
    width: 40%;
    background-color: GoldenRod;
    background-color: rgb(188, 121, 0);
    background-color: #BC7900;
    opacity: 0.9;
    padding: 0 2em 0 1em;
    margin: 1% 0 0 0;
    float: left;
}

    .text-section h1
    {
        font-family: "GillSansUltraBold", sans-serif;
        font-size: 2em;
        margin: 0 0 0.2em 0;
        padding: 0;
    }

    .text-section h2
    {
        font-family: "OpenSansExtraBold", sans-serif;
        font-size: 1.8em;
        margin: 0.4em 0 0em 0;
        padding: 0;
    }

    .text-section p
    {
        font-family: "OpenSans", sans-serif;
        font-size: 1em;
        padding: 0;
        margin: 0 0 0.3em 0;
    }

footer
{
    clear: both;
}

    footer *
    {
        display: inline;
    }
    • Fantastisch! Vielen Dank für die ausführliche Erklärung!
    InformationsquelleAutor avrahamcool
  2. 0

    In deinem Beispiel, die Sie gerade brauchen, um das einstellen .text-Abschnitt:

    position: relative;

    - und Fußzeile auf den Grund geht, wie Sie wollen.

    Sonst Ihre generische code wird im Grunde tun, was Sie suchen. Hier ein kurzer Stift zeigt das Konzept: Beispiel Stift

    InformationsquelleAutor rwaymouth
Schreibe einen Kommentar