Question

我遇到了一些问题：修复。这是我的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没有固定的职位。我希望它像固定位置一样操作，但我也希望保持导航棒以前的方式。任何帮助将不胜感激：）

Answer 1

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

＆＃13;

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;
}

＆＃13;

<!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>

＆＃13;

“位置：已修复”导致问题

1 个答案: