0

この質問は重複していますが、回答は1つしかなく（受け入れられていないか評価されていません）、議論はほとんどなく、OPは問題が解決したかどうかを報告しませんでした. 私のcssは提案を使用していますが、それは私の問題を解決しません。これは同じだと思います。

左にフロートされたナビゲーション カラムがあり、ナビゲーション バーに対して左にフロートされたコンテンツ ブロック (セクション) があります。次に、フッター セクションがあります (これは html5 です)。インラインのフッター ナビゲーションを作成しようとしています。

フッター ナビゲーションはナビゲーション列の下に表示されますが、テキストの左側に表示されます (ナビゲーション列を超えて拡張されます)。また、インラインではなくブロック形式で表示されます。

htmlはおおよそ次のとおりです。

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

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

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

そしてcssはおおよそ次のとおりです。

nav {
  float: left;
  ..
  ..
}

section {
  float: left;
  ..
  ..
}

footer {
    clear: both;
}

footer li {
  display: inline;
}

ここに例があります。

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

4

2 に答える 2

1

修正が必要な CSS の問題がいくつかあります。

  1. 実際の必要なしに、絶対/相対ポジショニングをたくさん使用します。
  2. 必要なときにベンダー固有を指定しません。
  3. CSS に追加のクロージング ブレスレットがあります (最終的に)。
  4. 二重宣言があります（無害ですが迷惑です）。

ところで、その固定CSSclear:both;を使用すると、突然機能することがわかります。(テキスト セクションが完全に配置されていたため、以前は機能しませんでした) また: & テキスト セクションを 1 つのdivで囲むことをお勧めします<footer>。

フッターのインラインの問題について、li要素はdisplay:inline;すべて含まれているdivように設定されていますが、最終的にはブロック要素のように動作します。簡単な修正としてfooter li、CSS の最後にあるセレクターを に変更しましたfooter *が、なりたいものを正確に指定する必要がありますinline。

そのため、変更を示すためのFiddleを次に示します。

修正された CSS (+ベンダー固有、-typos、-double 宣言)

#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;
    }
于 2013-09-23T09:09:35.497 に答える
0

あなたの例では、.text-section を次のように設定する必要があります。

position: relative;

そしてフッターはあなたが望むように一番下に行きます。

それ以外の場合、一般的なコードは基本的に探していることを行います。概念を示す簡単なペンを次に示します 。

于 2013-09-22T20:47:19.220 に答える