“位置：固定”导致问题

我遇到了一些位置问题：固定。这里是我的HTML代码：“位置：固定”导致问题

<!DOCTYPE html> 
    <html> 
    <head> 
    <title>Horizontal Menus</title> 
    <meta charset="utf-8"> 
    <link type="text/css" rel="stylesheet" href="stylesheet.css"> 
    </head> 
    <body> 
    <nav role="navigation"> 
    <ul> 
    <li><a class="button" href="">Home</a></li> 
    <li><a class="button" href="">Links</a></li> 
    <li><a class="button" href="">Forums</a></li> 
    <li><a class="button" href="">Contact</a></li> 
    </ul> 
    </nav> 

    <p>test</p> 
    </body> 
    </html>

这里是我的CSS代码：

body { 
    margin: 0; 
    padding: 0; 
    } 
    .button { 
    background: #e7e7e7; 
    border: 1px solid; 
    border-radius: 3px; 
    font: 700 1.2em Helvetica,Arial,serif; 
    line-height: 28px; 
    padding: .4em .8em .4em .8em; 
    text-align: center; 
    box-sizing: border-box; 

    } 

    ul { 
    padding: .5em; 
    list-style-type: none; 
    text-align: center; 
    background-color: green; 
    margin: 0; 
    position: fixed; 
    } 

    li { 
    display: inline; 
    } 

    a { 
    color: red; 
    } 

    a:hover { 
    background-color: black; 
    color: white; 
    }

该网站显示像
this具有固定的位置，它显示了像 this没有固定的位置。我希望它像一个固定的位置运行，但我也想保持导航棒以前的方式。任何帮助，将不胜感激:)

来源

2017-04-02 Lyfe

要么添加width: 100%或left: 0; right: 0

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.button { 
 
    background: #e7e7e7; 
 
    border: 1px solid; 
 
    border-radius: 3px; 
 
    font: 700 1.2em Helvetica, Arial, serif; 
 
    line-height: 28px; 
 
    padding: .4em .8em .4em .8em; 
 
    text-align: center; 
 
    box-sizing: border-box; 
 
} 
 

 
ul { 
 
    padding: .5em; 
 
    list-style-type: none; 
 
    text-align: center; 
 
    background-color: green; 
 
    margin: 0; 
 
    position: fixed; 
 
    width: 100%; 
 
} 
 

 
li { 
 
    display: inline; 
 
} 
 

 
a { 
 
    color: red; 
 
} 
 

 
a:hover { 
 
    background-color: black; 
 
    color: white; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Horizontal Menus</title> 
 
    <meta charset="utf-8"> 
 
    <link type="text/css" rel="stylesheet" href="stylesheet.css"> 
 
</head> 
 

 
<body> 
 
    <nav role="navigation"> 
 
    <ul> 
 
     <li><a class="button" href="">Home</a></li> 
 
     <li><a class="button" href="">Links</a></li> 
 
     <li><a class="button" href="">Forums</a></li> 
 
     <li><a class="button" href="">Contact</a></li> 
 
    </ul> 
 
    </nav> 
 

 
    <p>test</p> 
 
</body> 
 

 
</html>

来源

2017-04-02 23:58:30

“位置：固定”导致问题

回答

相关问题