Question

有没有办法让这个导航栏始终位于页面中间？我确信使用百分比将是最好的方式。我补充说我觉得需要改变哪一行。我只是想习惯CSS。任何帮助将不胜感激。

<!DOCTYPE html>
<html>
<head>
<style>
.menu {
    position:absolute; 
    background:#CCC;
    width:100%; 
    top:100px; 
    left:0; 
    height:23px; 
    padding: 0;
    text-align:center;
    font-size:20px;
    font-weight:light;
}

.ty-menu__items {
    position: absolute;
    left:20%;              /* This is the line that needs changing, I think*/
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    width:100%;
}

.ty-menu__item {
    float: left;
}

a:link, a:visited {
    display: block;
    width: 200px;
    font-weight: light;
    color: #FFF;
    background: #CCC;
    text-align: center;
    padding: 0;
    text-decoration: none;
    text-transform: uppercase;
}

a:hover, a:active {
    background: #000;
    border-bottom: 4px solid #fff;
}
</style>
</head>
<body>
<div class="menu">
<ul class="ty-menu__items">
  <li class="ty-menu__item"><a href="#home">Home</a></li>
  <li class="ty-menu__item"><a href="#news">News</a></li>
  <li class="ty-menu__item"><a href="#contact">Contact</a></li>
  <li class="ty-menu__item"><a href="#about">About</a></li>
</ul>
</div>
</body>

</html>

Answer 1

从left移除ul媒体资源，然后从float删除li媒体资源，改为li display: inline-block; { {1}}所以你可以简单地text-align: center;他们。代码如下：

.ty-menu__items {
    position: absolute;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    width:100%;
    text-align: center;
}

.ty-menu__item {
    display: inline-block;
}

导航栏在中间对齐

1 个答案: