Question

这个问题是duplicate，但只有一个答案（不接受或评级），几乎没有讨论，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问题。

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

CSS

clear:both;

div

<footer>

关于页脚中的内联问题，虽然li元素设置为display:inline;，但所有元素都包含div s，所以最后它们的行为类似于块元素。作为一个简单的修复，我将CSS末尾的footer li选择器更改为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;
    }

Answer 2

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

position: relative;

并且页脚会像你想要的那样到达底部。

否则您的通用代码基本上会执行您正在寻找的内容。这是一个显示概念的快速笔：Example Pen

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

2 个答案: