Question

我在使这个水平导航栏居中时遇到了一些问题。这是我的JSFiddle：http://jsfiddle.net/W796k/embedded/result/ 我正在寻找两件事： 1.如何在不放置指定宽度的情况下水平居中导航栏？ 2.如何在'ul'中进一步添加更多'li'，以便自动挤压所有'li'，以便为导航栏中新增的'li'腾出空间？

我是否清楚了一切？问我是否需要更多信息。提前感谢大家。

这是我的代码：

<Doctype! html>

<html>

<head>
<title> horizontal dropdown menu </title>

<style type="text/css" media="screen">

    a{
        font-family: "verdana", sans-serif;
        font-weight: bold;
    }
    nav ul{
        list-style: none;
        position: relative;
        background: #efefef;
        background: linear-gradient (top,#efefef,#bbbbbb);
        background: moz-linear-gradient (top, #efefef,#bbbbbb);
        background: webkit-linear-gradient (top,#efefef,#bbbbbb);
        box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
        padding: 0 20px;
        border-radius: 10px;
        display: inline-table;
    }
    nav ul li{
        display: inline-block;
        border-right: 1px solid #fff;
    }
    nav ul li:hover{
        background: #5b545f;
        background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
        background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
        background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
    }
    nav ul li a{
        text-decoration: none;
        color: #000;
        padding: 20px 20px;
        display: block;
    }
    nav ul li:hover a{
        color: #ffffff;
    }
    nav ul ul{
        background: #5f6975;
        border-radius: 0; padding: 0;
        position: absolute; top: 100%;
        display: none;
    }
    nav ul li:hover > ul{
        display: block;
    }
    nav ul ul li{
        display: block;
        border-top: 1px solid #6b727c;
        border-bottom: 1px solid #575f6a;
        border-right: 0;
        position: relative;
    }
    nav ul ul li a{
        padding: 10px 40px;
    }
    nav ul ul li a:hover{
        background: #4b545f;
    }
    nav ul ul ul{
        position: absolute; left: 100%; top: 0;
    }

</style>
</head>

<body>
    <nav>
        <ul>
            <li><a href="#"> Home </a></li>
            <li><a href="#"> Works &#8595 </a>
                <ul>
                    <li><a href="#"> Photoshop </a></li>
                    <li><a href="#"> Illustrator  </a></li>
                    <li><a href="#"> Web Design &#8594 </a>
                        <ul>
                            <li><a href="#"> HTML </a></li>
                            <li><a href="#"> CSS </a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#"> Downloads &#8595 </a>
                <ul>
                    <li><a href="#"> Softwares </a></li>
                    <li><a href="#"> Ebooks </a></li>
                </ul>
            </li>
            <li><a href="#"> About Us </a></li>
            <li><a href="#"> Contact </a></li>
        </ul>
    </nav>
</body>

</html>

Answer 1

你可以使用

 nav { text-align: center }

Answer 2

IMO，

nav { margin: 0 auto;}

说明：＆＃34; 0＆＃34;将设置＆＃34; margin-top＆＃34; ＆安培; ＆＃34;下边距＆＃34;为零。并且＆＃34; auto＆＃34;属性将设置左右边距，从而将导航设置为中心;

Answer 3

你不能只使用：

nav { text-align: center }

在你的CSS中

Answer 4

好吧，您可以使用表而不是列表。如果您正在使用列表，则给出宽度不会像您希望的那样设置添加的列表项。

1＆amp; 2.使用桌子可以避免制作它的中心而不给出特定的宽度。给你的桌子增加一个宽度，即使你在桌子上添加一个额外的元素也没有问题。它将自动调整给定的宽度而不用扰乱你的布局。

Answer 5

只需在样式表中使用这行代码即可。

nav { 
  text-align: center 
}

Answer 6

应用此样式：

nav{
  margin: 0 auto;
  display: table;
}

demo

Answer 7

text-align: center;会为你带来魔力..

Answer 8

以下将是css

*{
list-style: none;
margin:0;
padding: 0;
 }

nav table{
border-spacing: 10px 0; 
}    
.make-block{
position:relative;
}
nav table td span{
clear:both;
text-decoration: none;
display: table-cell;
white-space: nowrap;
position:relative;
 }

 nav table td:hover{
background: #000;
color:#fff;
 } 


nav table td dl {
display: none;
position: absolute;
}

nav table td:hover dl{
display: block;
}

dd{
padding-right: 20px;
background: #fff;
overflow: hidden;
display: inline-block;
position:relative;
}

ul.l1 li{
clear: both;
font-weight:bold;
font-size:10px;
padding: 5px 0;
}

nav a{
  text-decoration: none;
}
.l1{
display: table-cell;
padding: 6px;
white-space: nowrap;
}

以下是您可以使用的标记。

<nav>
<table>
<td>
<div class="make-block">
    <span>a</span>
        <dl>
            <dd>
                <ul class="l1">     
                    <li><a href="#">b</a></li>
                    <li><a href="#">c</a></li>
                </ul>   
            </dd>
        </dl>
</div>
</td>
<td>
<div class="make-block">
    <span>b</span>
        <dl>
            <dd>
                <ul class="l1">     
                    <li><a href="#">b</a></li>
                    <li><a href="#">c</a></li>
                </ul>   
            </dd>
        </dl>
</div>
</td>
</table>
</nav>

Answer 9

a{
  font-family: "verdana", sans-serif;
  font-weight: bold;
}

nav ul li{
  display: inline-block;
  border-right: 1px solid #fff;
}
nav ul li:hover{
  background: #5b545f;
  background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
  background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
  background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
nav ul li a{
  text-decoration: none;
  color: #000;
  padding: 20px 20px;
  display: block;
}
nav ul li:hover a{
  color: #ffffff;
}
nav ul ul{
  background: #5f6975;
  border-radius: 0; padding: 0;
  position: absolute; top: 100%;
  display: none;
}
nav ul li:hover > ul{
  display: block;
}
nav ul ul li{
  display: block;
  border-top: 1px solid #6b727c;
  border-bottom: 1px solid #575f6a;
  border-right: 0;
  position: relative;
}
nav ul ul li a{
  padding: 10px 40px;
}
nav ul ul li a:hover{
  background: #4b545f;
}
nav ul ul ul{
  position: absolute; left: 100%; top: 0;
}

/* flexbox */
nav {
  display: -webkit-flex;
  display: flex;

  -webkit-justify-content: center;
  justify-content: center;		

  -webkit-align-items: center;
  align-items: center;

  width: 100%;
  height: auto;
  background-color: lightgrey;							
}

nav ul {
  background-color: cornflowerblue;
  padding: 1rem;
  margin: 1rem;							

  -webkit-align-self: center;							
  align-self: center;
}
/* || flexbox */

<nav>
  <ul>
    <li><a href="#"> Home </a></li>
    <li><a href="#"> Works &#8595 </a>
      <ul>
        <li><a href="#"> Photoshop </a></li>
        <li><a href="#"> Illustrator  </a></li>
        <li><a href="#"> Web Design &#8594 </a>
          <ul>
            <li><a href="#"> HTML </a></li>
            <li><a href="#"> CSS </a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#"> Downloads &#8595 </a>
      <ul>
        <li><a href="#"> Softwares </a></li>
        <li><a href="#"> Ebooks </a></li>
      </ul>
    </li>
    <li><a href="#"> About Us </a></li>
    <li><a href="#"> Contact </a></li>
  </ul>
</nav>

如何使这个<nav>元素导航栏无宽度</nav>

9 个答案: