0

我正在尝试将导航元素放置在彩色框中。此框中的文本应位于此框的底部和中心。

HTML

<div class="sixteen columns">
  <section id="mainNav">
    <ul>
      <li id="nav2" class="navitem"><a href="#">ux / ui</a></li>
    </ul>
  </section>
</div><!--end sixteen columns-->

CSS：

    /*navigation styles*/
 .sixteen.columns #mainNav {
    width: 100%;
    margin-top: 50px;
}
#mainNav .navitem {
    width: 40%;
    display: block;
    float: left;
    position: relative;
    pointer: cursor;
}
#mainNav ul li a {
    font-family: print_clearlyregular, "Arial", serif;
    font-size: 2em;
    color: rgb(255, 255, 255);
    text-decoration: none;
    position: absolute;
    bottom: 15px;
    left: 0;
}
#mainNav #nav2 {
    background: rgb(3, 106, 113);
    opacity:0.8;
    filter:alpha(opacity=80);
    /* For IE8 and earlier */
    margin-right: 4px;
    height: 150px;
    text-align:center;
}

一旦我绝对定位“ul li a”，文本对齐：中心就不起作用。我应该如何解决这个问题？

您也可以在 jsfiddle 中看到这一点：

jsFiddle

4

3 回答 3

3

添加width:100%;到

#mainNav ul li a {}

小提琴：http: //jsfiddle.net/sablefoste/bcM2x/

于 2013-11-06T17:55:29.300 回答
0

我想添加一个不依赖浮动或绝对定位的替代解决方案，这可能会变得非常混乱。

使用display: table、display: table-cell和vertical-align: bottom，您可以达到上述结果。当周围的其他项目可能发生变化时，这也可以很好地扩展。

这是一个有效的 jsFiddle 演示

jsFiddle 演示截图


CSS 更改

我删除了所有浮动和位置样式，添加display: table到ul，添加display: table-cell和vertical-align: bottom，li添加display: inline-block到a以及margin-bottom: 15px保留您创建的绝对定位的填充。我修改了选择器并添加了一些其他小东西，您可以根据自己的喜好使用或调整。

/*navigation styles*/
#mainNav 
{
    width: 100%;
    margin-top: 50px;
}
#mainNav > ul 
{
    display: table;
    width: 100%;
    margin: 0;
    padding: 0;
    border: none;
}
#mainNav > ul > li 
{   
    display: table-cell;
    height: 150px;
    text-align: center;
    vertical-align: bottom;
    pointer: cursor;
    background: rgb(3, 106, 113);
    opacity:0.8;
    filter:alpha(opacity=80);
    /* For IE8 and earlier */
    margin-right: 4px;
}

#mainNav > ul > li > a
{
    display: inline-block;
    margin-bottom: 15px;
    font-family: print_clearlyregular, "Arial", serif;
    font-size: 2em;
    color: rgb(255, 255, 255);
    text-decoration: none;
    background: blue; // added for demo to show width and margin
}
于 2013-11-06T18:51:39.853 回答
0

不要为left（或right就此而言）为指定任何值ul li a。

于 2013-11-06T17:54:21.353 回答