css - 如何将页脚推到内容下方并内联显示？

Question

这个问题是duplicate ，但只有一个答案(未被接受或评价)，几乎没有讨论，如果解决了问题，OP 也没有反馈。我的 css 使用了建议，但它没有解决我的问题，我相信这也是一样的。

我有一个导航列向左浮动，一个内容 block (部分)向左浮动靠在导航栏上。然后我有一个页 footer 分(这是 html5)。我正在尝试创建内联的页脚导航。

页脚导航显示在导航列下方，但在文本左侧(延伸到导航列之后)。此外，它以 block 格式出现，而不是内嵌格式。

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/

Answer 1

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

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

顺便说一句，如果你使用那个固定的 CSS 你会看到 clear:both;突然工作。 (之前没有用，因为文本部分是绝对定位的) 另外:我建议您将 & 文本部分包含在一个 div 中，从而迫使 <footer>即使没有清除也总是低于它们。

关于页脚中的内联问题，尽管 li元素设置为 display:inline;所有这些都包含 div s，所以最终，它们将表现得像 block 元素。 作为一个简单的修复，我改变了 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;
    }