Question

我有下面的CSS，这使我的导航栏居中。但是，我想添加以下行“position：fixed”，但是如果我这样做，导航栏将不再居中，并且将不再在屏幕上拉伸边界线。

有什么建议吗？（谢谢！）

.navbar{
    border:1px solid #ccc;
    border-width:1px 0;
    list-style:none;
    margin:0;
    padding:0;
    text-align:center; } 

.navbar li{
    display:inline; } 

.navbar a{
    display:inline-block;
    padding:10px; }

body {
    padding-left: 0em;  padding-bottom: 0em;
    color: white;
    background-color: #708090; 
    font-family: Georgia, Times, serif}

Answer 1

HTML

<nav>
  <ul>
    <li><a href="#">First Nav Item</a></li>
    <li><a href="#">Second Nav Item</a></li>
    <li><a href="#">Third Nav Item</a></li>
  </ul>
</nav>

CSS

nav { 
  position: fixed;
  top:0; left:0;
  width:100%; height:40px;
  line-height:40px;
  text-align: center; }

nav li { display: inline; }

居中和固定导航

1 个答案: