Question

我现在所拥有的#nav-bar的背景颜色不会显示在左侧，我希望它显示所有顶部宽度（直观地100％宽度）。这很奇怪，因为即使我说宽度是100％，它正是我想要的宽度尺寸，但它好像背景颜色向右移动，只有白色空间朝向我的形象权利。它从第一个是文本的中间开始，在我说的最右边结束，还有额外的空格。

＆＃13;

body {
  margin: 0;
  border: 0;
}

#container {
  position: relative;
}

h1 {
  position: absolute;
  font-size: 90px;
  top: 0;
  left: 0;
  text-align: center;
  width: 100%;
}

img {
  width: 100%;
  height: 1000px;
  margin: -287px -100px 0px 0px;
}

#nav-bar {
  position: absolute;
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-size: 38px;
  top: 0;
  left: 31%;
  word-spacing: 30px;
}

#nav-bar {
  width: 100%;
  height: 70px;
  background-color: black;
}

#nav-bar {
  opacity: .30;
  filter: (opacity=30);
}

li {
  display: inline;
  color: white;
}

li a {
  text-decoration: none;
}

li a:hover {
  opacity: 0.5;
}

＆＃13;

<body>
  <div id="container">
    <img src="...">
    <h1>IndieForwardMusic</h1>
    <ul id="nav-bar">
      <li id="li-1">Home</li>
      <li id="li-2">About</li>
      <li id="li-3">
        <a href="..."></a>
      </li>
      <li id="li-4">Contact</li>
    </ul>
  </div>
</body>

＆＃13;

Answer 1

这是因为你的#nav-bar有left: 31%所以它从中间开始。因此设置left: 0将适合您的容器。请查看下面的代码段以供参考。

body {
  margin: 0;
  border: 0;
}

#container {
  position: relative;
}

h1 {
  position: absolute;
  font-size: 90px;
  top: 0;
  left: 0;
  text-align: center;
  width: 100%;
}

img {
  width: 100%;
  height: 1000px;
  margin: -287px -100px 0px 0px;
}

#nav-bar {
  position: absolute;
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-size: 38px;
  top: 0;
  left: 0;
  word-spacing: 30px;
}

#nav-bar {
  width: 100%;
  height: 70px;
  background-color: black;
}

#nav-bar {
  opacity: .30;
  filter: (opacity=30);
}

li {
  display: inline;
  color: white;
}

li a {
  text-decoration: none;
}

li a:hover {
  opacity: 0.5;
}

<body>
  <div id="container">
    <img src="...">
    <h1>IndieForwardMusic</h1>
    <ul id="nav-bar">
      <li id="li-1">Home</li>
      <li id="li-2">About</li>
      <li id="li-3">
        <a href="..."></a>
      </li>
      <li id="li-4">Contact</li>
    </ul>
  </div>
</body>

Answer 2

更改此课程。试试这个。

＆＃13;

#nav-bar {
  position: absolute;
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-size: 38px;
  top: 0;
  left: 0;
  word-spacing: 30px;
}

＆＃13;

Answer 3

在body

中添加overflow-x：hidden css

       body {
            margin: 0;
            border: 0;
            overflow-x: hidden;
        }

        #container {
            position: relative;
        }

        h1 {
            position: absolute;
            font-size: 90px;
            top: 100px;
            left: 0;
            text-align: center;
            width: 100%;
        }

        img {
            width: 100%;
            height: 1000px;
            margin: -287px -100px 0px 0px;
        }

        #nav-bar {
            position: absolute;
            list-style-type: none;
            margin: 0;
            padding: 0;
            font-size: 38px;
            top: 0;
            left: 31%;
            word-spacing: 30px;
        }

        #nav-bar {
            width: 100%;
            height: 70px;
            background-color: black;
        }

        #nav-bar {
            opacity: .30;
            filter: (opacity=30);
        }

        li {
            display: inline;
            color: white;
        }

        li a {
            text-decoration: none;
        }

        li a:hover {
            opacity: 0.5;
        }

 <body>
    <div id="container">
        <img src="...">
        <h1>IndieForwardMusic</h1>
        <ul id="nav-bar">
            <li id="li-1">Home</li>
            <li id="li-2">About</li>
            <li id="li-3">
                <a href="..."></a>
            </li>
            <li id="li-4">Contact</li>
        </ul>
    </div>
</body>

为什么菜单的背景颜色只从我的图像的顶部到中心开始而不是全部？

3 个答案: