2

我有以下问题：

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

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/

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

4

7 回答 7

2

如果你真的想要连字符。这是我能做的最好的。 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;
}
于 2012-06-22T09:01:13.433 回答
0

尝试使用

<div id="footer">
      <ul>
        <li>text headline</li>
        <li>link 1</li>
        <li>link 2</li>
        <li>link 3</li>
      </ul>
  </div>

为了你的标记，和

footer {
    height: 200px;
    font-size: 14px;
    width: 400px;
}


#footer li {
    text-align: center;
    display: inline-block;
     list-style-type: none;
    float: left;
    width: 100px;
    position: relative;
}

为你的 CSS

于 2012-06-22T08:31:46.977 回答
0

您可以将 ul 用于以下工作示例：

http://jsfiddle.net/fFddz/5/

于 2012-06-22T08:32:07.337 回答
0

您可以将边框与:first-child伪选择器结合使用，以将其限制为除第一个元素之外的所有元素。

#footer dl dd {
    list-style-type: none;
    float: left;
    width: 100px;
    position: relative;
    border-left: 1px solid #000000;
}

#footer dl dd:first-child {
    border-left: 0;
}
于 2012-06-22T08:37:39.173 回答
0

我能想到的适用于几乎所有浏览器的最简单方法是使用以下样式：

#footer dl {
    display: inline-block;
}
#footer dt {
    float: left;
    display: block;
}
#footer dl dd {
    list-style-type: none;
    padding: 0;
    margin: 0;
    float: left;
    display: block;
    position: relative;
    width: 100px;
    text-align: center;
    border-right: solid 1px #000;
}
#footer dl dd.last {
    border: none;
}

通过这些样式，您可以使用以下 HTML：

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

这是它的小提琴：http: //jsfiddle.net/sarcastyx/Dbh9H/

于 2012-06-22T09:16:19.847 回答
0

我想建议您将链接放在一个中，<dd>然后您将能够对第一个链接使用伪选择器:first-child来隐藏左边框

fordt并dd设置float:left为一行并dl设置overflow: hidden为清除浮动

html

    <div id="footer">
      <dl>
        <dt>text headline</dt>
        <dd>
            <a href="">link1</a>         
            <a href="">link2</a>         
            <a href="">link3</a>         
        </dd>
      </dl>
  </div>

css

footer {
    height: 200px;
    font-size: 14px;
    width: 500px;
}
#footer dl {
    text-align: center;
    display: inline-block;
    overflow:hidden;            
}
#footer dt {
    float: left;
}
#footer dd {
    float: left;
}
#footer dd a {
    border-left: 1px solid #000;
    list-style-type: none;
    width: 100px;
    display:inline-block;
    *display: inline; zoom: 1;    
    position: relative;
}
#footer dd a:first-child {
    border-left: none;
}

小提琴http://jsfiddle.net/fFddz/11/

于 2012-06-22T09:18:38.067 回答
0

嘿，看看这个http://jsfiddle.net/fFddz/13/

将 html 结构更改为 UL 并更改了 css。

于 2012-06-22T11:11:42.380 回答