0

我正在创建一个“平面设计”网站，对于我的导航栏，我希望它能够扩展到它正下方的 div 的宽度。我已经做到了。但是，对于导航本身，我使用了一个列表。该列表以块的形式内联显示，但我希望 UL 在导航 DIV 中居中，无论它是什么宽度。这将是一个动态宽度。这是我的CSS：

div#header{
    width:982px;
    height:160px;
    margin-top:10px;
    margin-right:auto;
    margin-left:auto;
}
div#nav{
    width:auto;
    height:43px;
    padding-top:15px;
    padding-right:15px;
    padding-bottom:5px;
    background-color:rgba(100,100,100,0.3);
    border-left-color:rgba(255,255,255,0.2);
    border-right-color:rgba(255,255,255,0.2);
    border-right-width:1px;
    border-right-style:solid;
    border-left-width:1px;
    border-left-style:solid;
    border-top-width:1px;
    border-top-style:solid;
    border-top-color:rgba(255,255,255,0.2);
    margin-left:auto;
    margin-right:auto;
}
#nav ul{
    padding:0;
    list-style:none;
    display:inline-block;
    margin:0;
}
#nav ul li{
    width:48px;
    height:48px;
    margin-left:15px;
    display:inline-block;
    background-color:#000000;
    padding:0;
}
#nav ul li a{
    z-index:10;
}
#googleplus{
    width:48px;
    height:48px;
    background-image:url('images/googleplus.png');
    display:block;
}
#facebook{
    width:48px;
    height:48px;
    background-image:url('images/facebook.png');
    display:block;
}
#twitter{
    width:48px;
    height:48px;
    background-image:url('images/twitter.png');
    display:block;
}
#youtube{
    width:48px;
    height:48px;
    background-image:url('images/youtube.png');
    display:block;
}
#minecraft{
    width:48px;
    height:48px;
    background-image:url('images/minecraft.png');
    display:block;
}
#nav ul li#googleplus{
    background-color:#d34836;
    transition:background-color;
    transition-duration:0.17s;
}
#nav ul li#googleplus:hover{
    background-color:#c23725;
}
#nav ul li#facebook{
    background-color:#3b5998;
    transition:background-color;
    transition-duration:0.17s;
}
#nav ul li#facebook:hover{
    background-color:#2a4887;
}
#nav ul li#twitter{
    background-color:#4099ff;
    transition:background-color;
    transition-duration:0.17s;
}
#nav ul li#twitter:hover{
    background-color:#3188ee;
}
#nav ul li#youtube{
    background-color:#de443e;
    transition:background-color;
    transition-duration:0.17s;
}
#nav ul li#youtube:hover{
    background-color:#bc221c;
}
#nav ul li#minecraft{
    background-color:#5e5645;
    transition:background-color;
    transition-duration:0.17s;
}
#nav ul li#minecraft:hover{
    background-color:#4d4534;
}

这是HTML：

<div id="header">
    <div id="logo">
    </div>
    <div id="nav">
        <ul>
            <li id="facebook" ><a id="facebook" href="#" ></a></li>
            <li id="twitter" ><a id="twitter" href="#" ></a></li>
            <li id="youtube" ><a id="youtube" href="#" ></a></li>
            <li id="minecraft" ><a id="minecraft" href="#" ></a></li>
        </ul>
    </div>
</div>

有人能想出一种使 UL 居中的方法吗？

PS 我已经尝试过 margin:0 auto; 所以不要这样回答。

4

2 回答 2

2

显示：内联块

您可以使用 display:inline-block，如下所示：

#nav ul{
    padding:0;
    list-style:none;
    margin:0;
  **/*to center*/
  text-align: center;
  font-size: 0;
  letter-spacing: -4px;
  word-spacing: -4px;**
}
#nav ul li{
    width:48px;
    height:48px;
    margin-left:15px;
    background-color:#000000;
    padding:0;
  
  /*to center*/
  **display: inline-block;
  *display: inline;
  zoom:1;
  letter-spacing: normal;  
  word-spacing: normal;
  font-size: 12px;**
}

请查看演示。

漂浮

您可以使用浮动安德位置，如下所示：

#nav{
    /*to center*/
    **width:100%;
    float: left;
    overflow: hidden;
    position: relative;**
    height:43px;
    padding: 15px 15px 5px 0;
    background-color:rgba(100,100,100,0.3);
    border: 1px solid rgba(255,255,255,0.2);
    border-bottom: none;
}
#nav ul{
    padding:0;
    list-style:none;
    margin:0;
  /*to center*/
    **clear: left;
    float: left;
    position: relative;
    left: 50%;/*整个分页向右边移动宽度的50%*/
    text-align: center;**
}
#nav ul li{
    width:48px;
    height:48px;
    margin-left:15px;
    background-color:#000000;
    padding:0;
  
  /*to center*/
  **display: block;
  float: left;
  position: relative;
  right: 50%;/*将每个分页项向左边移动宽度的50%*/**
}

请查看演示。

CSS3 适合内容

你可以使用css3 fit-content，像这样：

#nav ul{
    padding:0;
    list-style:none;
    margin:0;
  /*to center*/
  **width: -moz-fit-content;
  width:-webkit-fit-content;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;**
}
#nav ul li{
    width:48px;
    height:48px;
    margin-left:15px;
    background-color:#000000;
    padding:0;
  
  /*to center*/
  **float: left;**
}

请查看演示。您还可以使用其他方法，例如：display: table和display: flex; 如果您想了解如何使用其他方法，请点击此处。

于 2013-06-21T01:43:10.447 回答
1

为什么不使用弹性盒模型或弹性盒？

您将制作一个非常快速和简单的布局。

在您的父元素中添加这些类，（我的意思是在nav元素中）：

<nav id="nav" class="p-flexbox flex-hcc">
 <ul>
  <!-- The content -->
 </ul>
</nav>

在哪里：

  1. p-flexbox表示父flexbox
  2. flex-hcc表示flex-horizo​​ntal-center-center

在您的 CSS 文件中，您必须放置以下规则：

.p-flexbox {
   display: -webkit-box;
   display: -moz-box;
   display: box;
}

.flex-hcc {
   -webkit-box-orient: horizontal;
      -moz-box-orient: horizontal;
           box-orient: horizontal;

   -webkit-box-pack: center;
      -moz-box-pack: center;
           box-pack: center;

   -webkit-box-align: center;
      -moz-box-align: center;
           box-align: center;
}

这是一个例子：DEMO

就像我在另一篇文章中所说的那样，这是一个正在修订的盒子模型，所以要小心！

干杯，狮子座

于 2013-06-21T01:01:53.803 回答