0

This question is a duplicate, but there was only one answer (not accepted or rated), almost no discussion, and the OP did not report back if it solved the problem. My css uses the suggestion, and it does not solve my problem, which I believe is the same.

I have a nav column floated to the left, and a content block (section) floated left against the nav bar. Then I have a footer section (this is html5). I am trying to create a footer nav that is inline.

The footer nav appears below the nav column, but to the left of the text (which extends past the nav column). Also, it appears in block format, not inline.

The html is roughly: 

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

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

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

And the css is roughly:

nav {
  float: left;
  ..
  ..
}

section {
  float: left;
  ..
  ..
}

footer {
    clear: both;
}

footer li {
  display: inline;
}

Here is an example.

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

4

2 回答 2

1

您有几个 CSS 问题需要修复。

  1. 您在没有真正需要的情况下使用了很多绝对/相对定位。
  2. 您没有在需要时指定特定供应商。
  3. 你的 CSS 中有一个额外的闭合手镯（最后）。
  4. 你有一个双重声明（它无害，但很烦人）。

顺便说一句，如果你使用那个固定的CSS，你会发现它clear:both;突然起作用了。（它以前不起作用，因为 text-section 是绝对定位的）还有：我建议您将 & text-section 包含在一个中div，从而即使不清除也强制<footer>始终位于它们下方。

关于页脚中的内联问题，虽然li元素都设置为display:inline;它们都包含divs，所以最后它们的行为就像块元素一样。作为一个简单的解决方法，我将footer liCSS 末尾的选择器更改为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 回答