Question

当我试图设定＆＃34; ul＆＃34;的相对位置时元素嵌套在带有id nav的div，它在Web页面上添加Horizontal Scroll Bar。请帮忙了解这个＆amp;的原因解决方案。基本上我想将导航菜单放在屏幕中央。

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>TESTING PAGE</title>

  <style type="text/css">
    body {
      margin: 0;
      padding: 0;
    }
    
    #nav {
      background-color: black;
      color: white;
    }
    
    #nav ul {
      list-style-type: none;
      position: relative;
      left: 100px;
    }
    
    #nav ul li {
      display: inline;
    }
  </style>
</head>

<body>

  <h1>NAVIGATION BAR</h1>

  <div id="nav">
    <ul>
      <li>HOME</li>
      <li>ABOUT</li>
      <li>CONTACT</li>

    </ul>

  </div>



</body>

</html>

＆＃13;

Answer 1

它溢出的原因是因为如果您没有为display的{{1}}属性明确应用值，则该值默认为ul。

block元素占据宽度的100％，因此，将元素display: block;向右移动，100px会使文档溢出#nav ul。

您可以通过将边框应用于100px然后尝试将其ul属性更改为例如display来对此进行测试。

inline

body {
  margin: 0;
  padding: 0;
}

#nav {
  background-color: black;
  color: white;
}

#nav ul {
  list-style-type: none;
  position: relative;
  left: 100px;

  border: solid red 1px;
  /* try un-commenting this and see what happens!
  display: inline;
  */
}

#nav ul li {
  display: inline;
}

如果您想将<h1>NAVIGATION BAR</h1> <div id="nav"> <ul> <li>HOME</li> <li>ABOUT</li> <li>CONTACT</li> </ul> </div>元素移到ul的中心，只需将#nav添加到left: 50%; transform: translateX(-50%);。

变换平移元素相对于自身的位置，因此，如果元素的宽度为100px并且您应用该特定变换，则会将该元素50px（其自身宽度的一半）重新定位到其当前左侧位置的左侧。

应该注意的是，您还应该将#nav ul应用于padding-left: 0，因为#nav ul元素默认情况下会应用填充。

ul

body {
  margin: 0;
  padding: 0;
}

#nav {
  background-color: black;
  color: white;
}

#nav ul {
  list-style-type: none;
  position: relative;

  left: 50%;
  transform: translateX(-50%);
  border: solid red 1px;
  display: inline-block;
  margin: 0 auto; /* to remove the default top & bottom margins for inline-blocks */
  padding-left: 0; /* to remove the default padding-left for ULs */
}

#nav ul li {
  display: inline;
}

Answer 2

以下是您问题的解决方案：

＆＃13;

    body {
      margin: 0;
      padding: 0;
    }
    
    #nav {
      background-color: black;
      color: white;
    }
    
   li {
      display: inline;
    }
    
    ul{
      padding-left: 0px;
      display: wrap;
      text-align: center;  
    }

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>TESTING PAGE</title>

</head>

<body>

  <h1>NAVIGATION BAR</h1>

  <div id="nav">
    <ul>
      <li>HOME</li>
      <li>ABOUT</li>
      <li>CONTACT</li>

    </ul>

  </div>

</body>

</html>

＆＃13;

display: wrap;使用ul属性和text-align: center;。这样，它们就可以与中心对齐，而无需在代码中添加额外的硬编码left: 100px;。

相对定位元素将水平滚动条添加到网页

2 个答案: