1

我需要一些帮助！我在做某事，但我无法让它工作。:) 我希望文本居中对齐。这是图片：http: //imageshack.us/photo/my-images/266/sn54.jpg/

任何人都可以给我一些提示吗？谢谢。

这是我使用的代码：

HTML：

<div id="container">
    <div id="header">
            <ul class="nav">
                <li><a href="index.html">Home</a></li>
                <li><a href="#">Protfolio</a></li>
                <li><a href="#">About Me</a></li>
                <li><a href="#">Contact Me</a></li>
            </ul>
    </div><!-- header end -->
   </div><!-- container end -->

CSS：

#header{
position: relative;
margin: 60px 0 0 0;
width: 100%;
height: 80px;}

.nav{
background: url(../images/navbar.png) no-repeat 0 0;
width:100%;
height:80px;
text-align:center;
display:block;}

.nav li{
float:left;
list-style: none;
margin: 10px;}

.nav li a{
width:150px;
text-shadow: 0 2px 1px rgba(0,0,0,0.5);
display: block;
text-decoration: none;
color: #f0f0f0;
font-size: 1.6em;
margin: 0 .5em;}

.nav li a:hover {
margin-top: 2px;
background-color: #d0d5d6;}
4

3 回答 3

1

一种简单的方法是在nav元素的左右两侧添加填充，使其与功能区部分的宽度相等。

.nav {
    padding:0 XXpx; /* XXpx = width of the ribbon ends */
}


.nav li {
    width:25%;
    text-align:center;
    margin:0;
}

作为基础，这应该可以解决您的问题。您可能必须根据边距等使用确切的代码来满足您的需求。

或者，查看本教程，了解如何仅使用 CSS 创建这种类型的功能区而不依赖于图像：http ://css-tricks.com/snippets/css/ribbon/

于 2013-08-29T07:49:46.287 回答
0

在不知道背景图像的尺寸的情况下很难具体说明，但请尝试将背景放在标题元素而不是导航上。然后，您可以将导航 UL 的宽度设置为功能区图像内部的宽度，并在其上设置边距 0 auto 以使其水平居中

于 2013-08-29T07:49:08.470 回答
0

我会用一个 div 包装 ul，这个 div 有背景图像。比你可以调整ul。

于 2013-08-29T07:49:56.880 回答