Question

我创建了ul元素。这些是导航栏的html和css：

HTML：

 <ul id="list-nav">
    <li><a href="Marsrutas.html">Item1</a>
    </li>
    <li><a href="Nuotraukos.html">Item2</a>
    </li>
    <li><a href="Apie zygi.html">Item3</a>
    </li>
    <li><a href="Apie mane.html">Item4</a>
    </li>
    <li><a href="Dviraciai.html">Item5</a>
    </li>
    <li><a href="Kontaktai.html">Item6</a>

CSS：

    ul#list-nav {
  margin:40px;
  padding:0;
  list-style:none;
  width:525px;
}

ul#list-nav li {

  display:inline
  text-align: center;

}

ul#list-nav li a {
 text-decoration:none;
 padding:5px 0;
 width:65px;

 color:#eee;
 float:left;
 margin:5px;
}

ul#list-nav li a {
  text-align:center;

}

ul#list-nav li a:hover {
  color:#000;
   border-width: 1px;
 border-style: solid;
 border-color: #FFFFFF; 
 -moz-border-radius: 5px;
border-radius: 5px;

}

如何将此导航栏与页面中心对齐？

另外，我想问一下如何让li物品在悬停时保持静止，因为当鼠标悬停在它们上方时它们会向下移动一点。例如：http://jsfiddle.net/bufbond/uJ76F/

Answer 1

<强>小提琴：

http://jsfiddle.net/uJ76F/3/

只需添加自动边距以进行居中：

#list-nav {    
    margin:auto;    
}

ul#list-nav li a {
    text-align:center;
    border-width: 1px solid #000;
}
ul#list-nav li a:hover {
    color:#000;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

从悬停中移除边框或在悬停时更改颜色。

Answer 2

您在悬停时添加边框。添加1px透明边框

ul#list-nav li a {
    border: 1px solid transparent;
}

js fiddle

如何在页面中居中<ul>？</ul>

2 个答案: