在html5 nav中居中链接

时间:2014-02-26 02:25:01

标签: css html5 hyperlink center nav

我需要将所有链接内容(在本例中为所有数字)放在HTML <nav>元素中。

css:

section nav {
    border: 1px solid #ccc;
    clear: left;
    float: left;
    height: 28px;
    margin: 10px auto 0;
    width: 598px;
    overflow: hidden;
}

section nav a {
    float: left;
    padding: 5px 10px;
}

html:

<section>
    <nav>
            <a href="https://puaction.com/pua-0/">0</a>
            <a href="https://puaction.com/pua-1/">1</a>
            <a href="https://puaction.com/pua-2/">2</a>
            <a href="https://puaction.com/pua-3/">3</a>
            <a href="https://puaction.com/pua-4/">4</a>
            <a href="https://puaction.com/pua-5/">5</a>
            <a href="https://puaction.com/pua-6/">6</a>
            <a href="https://puaction.com/pua-7/">7</a>
            <a href="https://puaction.com/pua-8/">8</a>
            <a href="https://puaction.com/pua-9/">9</a>
            <a href="https://puaction.com/pua-10/">10</a>
        </nav>
</section>

jsFiddle: http://jsfiddle.net/EEtD4/

:)

谢谢!

1 个答案:

答案 0 :(得分:1)

http://jsfiddle.net/EEtD4/1/

添加了这个

section nav {
   text-align: center;
}

改变

section nav a {
   float: left;  /* removed this */
}

编辑

另外,为了使链接垂直居中,我也做了这个

section nav {
      line-height: 28px;
}

而不是

  height: 28px;

http://jsfiddle.net/EEtD4/2/