如何将页脚推到内容下方并内嵌显示？

Question

这个问题是重复的 ，但是只有一个答案（不被接受或未定级），几乎没有讨论，并且如果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/

Answer 1

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

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

顺便说一句，如果您使用固定的CSS，您将看到clear:both; 突然起作用。 （由于文本部分的绝对位置，此操作以前不起作用）：我建议您将＆文本部分括在一个div ，从而即使不清除也强制<footer>始终位于其下方。

关于页脚中的内联问题，尽管li元素设置为display:inline; 它们都包含div ，因此最后它们的行为类似于块元素。 作为一个简单的解决方法，我将CSS末尾的footer li选择器更改为footer * ，但是您应该准确指定要inline 。

因此，这里有一个小提琴来演示更改。

固定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;
    }

Answer 2

在您的示例中，您只需要将.text-section设置为：

position: relative;

页脚随心所欲地移至底部。

否则，您的通用代码基本上可以满足您的需求。 这是展示概念的快速笔： 示例笔