带有 css 的 html 页脚

Question

我有以下问题:

我想创建一个页脚。页脚应如下所示:

text headline           link 1    |    link 2    |    link 3  

我的想法是使用 div 作为容器。在 html 中我仍然不知道该使用什么。使用 dl 或 ul 来实现这一点会更好吗？

所以我通过 dl 使用以下 html 完成了它:

<div id="footer">
      <dl>
        <dt>text headline</dt>
        <dd>link 1</dd>
        <dd>link 2</dd>
        <dd>link 3</dd>
      </dl>
  </div>

对于CSS:

#footer {
    height: 200px;
    font-size: 14px;
    width: 1200px;
}
#footer dl {
    text-align: center;
    display: inline-block;
}
#footer dl dd {
    list-style-type: none;
    float: left;
    width: 100px;
    position: relative;
}

问题是我不知道如何添加连字符。另一个问题是标题位于链接之前。这是示例:

http://jsfiddle.net/fFddz/2/

所以如果有人可以帮助我，我真的很感激。非常感谢。

Answer 1

如果你真的想要连字符。这是我能做的最好的了。 http://jsfiddle.net/fFddz/9/

如果没有我你也能活下去，我会写下面的内容。

HTML

<div id="footer">
<ul>
    <li><a>...</a></li>
    <li><a>...</a></li>
    <li><a>...</a></li>
    ....
</ul>
</div>

CSS

#footer div{
      /**what you already have***/
}

/**Makes the items appear in a line. But you can't define the width of an inline element.**/
#footer li{
    display:inline;
    float:left;
}

#footer a{
    display:block; /**Allows you to define a width.*//
    text-align:center;
}