Question

如果用户分辨率设置，我如何将此导航栏居中以使其保持在屏幕中央？另外，如何停止＆＃39; Portfolio＆＃39;的下拉菜单拉伸菜单？

<ul id="menu">
<li><a href="#">Home</a></li>
<li>
    <a href="#">About</a>
    <ul class="hidden">
        <li><a href="#">Who We Are</a></li>
        <li><a href="#">What We Do</a></li>
    </ul>
</li>

一些HTML ......

Answer 1

这应该让你开始。重要的是漂浮使得定心物品非常困难。

display:inline-block的效果要好得多，因为您可以将text-align:center应用于父ul来集中列表项。

然后只是使用定位来设置子菜单的位置和大小。

/*Strip the ul of padding and styling*/

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  /* center contents of menu */
  text-align: center;
}
/*Create a horizontal list with spacing*/

li {
  display: inline-block;
  vertical-align: top;
  margin-right: 1px;
  /* create positioning context */
  position: relative;
}
/*Style for menu links*/

li a {
  display: block;
  min-width: 140px;
  /* removed set height */
  min-height: 50px;
  line-height: 50px;
  text-align: center;
  font-family: helvetica, arial, sans-serif;
  color: #ffffff;
  background: #6BD6FA;
  text-decoration: none;
}
/*Hover state for top level links*/

li:hover a {
  background: #A0A2A3;
  color: #ffffff;
}
/*Hover state for dropdown links*/

li ul a:hover {
  background: #bada55;
  color: #ffffff;
}
/*Hide dropdown menu until are needed*/

li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  height: auto;
}
/*Show  dropdown menu on hover */

li:hover ul {
  display: block;
}
/*Make dropdown links vertical*/

li ul li {
  display: block;
}

<ul id="menu">
  <li><a href="#">Home</a>
  </li>
  <li>	<a href="#">About</a>
    <ul class="hidden">
      <li><a href="#">Who We Are</a>
      </li>
      <li><a href="#">What We Do</a>
      </li>
    </ul>
  </li>
  <li><a href="#">Portfolio</a>

    <ul class="hidden">
      <li><a href="#">Web & User Interface Design</a>
      </li>
    </ul>
  </li>
  <li><a href="#">News</a>
  </li>
  <li><a href="#">Contacts</a>
  </li>
</ul>

Answer 2

/*Strip the ul of padding and styling*/
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align:center;
}

/*Create a horizontal list with spacing*/
li {
    display: inline-block;
    margin-right: 0px;
}
ul#menu > li{
    position:relative;
}
ul > li  > ul{
    position:absolute;
}
ul > li  > ul li{
    white-space:nowrap;
}

/*Style for menu links*/
li a {
    display: block;
    padding:25px 50px;
    line-height: 50px;
    text-align: center;
    font-family: helvetica, arial, sans-serif;
    color: #ffffff;
    background: #6BD6FA;
    text-decoration: none;
}

/*Hover state for top level links*/
li:hover a{
    background: #A0A2A3;
    color: #ffffff;
}

/*Style for dropdown links*/
li:hover a {
    background: #A0A2A3;
    color: #ffffff;
    height: 50px;
    line-height: 50px;
}

/*Hover state for dropdown links*/
li:hover ul a:hover {
    background: #A0A2A3;
    color: #ffffff;
}

/*Hide dropdown links until they are needed*/
li ul  {
    display: none;
}

/*Make dropdown links vertical*/
li ul li {
    display: block;
    float: none;
}

/*Prevent text wrapping*/
li ul li a {
    width: auto;
}

/*Display dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
    display: block;
}

我也更新了jsfiddle：http://jsfiddle.net/y4vDC/385/

Answer 3

试试这个

ul {
 list-style-type: none;
 margin: 0 auto;
 width:80%;
 padding:0;
}

居中一个水平导航栏？

3 个答案: