CSS3：导航中的元素定位

Question

我知道有四种不同的位置值：

• 静态
• 相对
• 固定
• 绝对

当我增加它的marigin时，真正困扰我的是元素的位置。像下面的东西。

  

HTML

<header>
<h1>Welcome to Online Shopping System <button type="submit" onclick = "location.href = 'adminlogin.php';" id = "button" >Admin</button></h1>
</header>
<nav id = "navigation">
   <ul>
     <li><a href = "welcome.php">Home</a></li>
     <li><a href = "view.php">View</a></li>
     <li><a href = "login.php">Login</a></li>
     <li><a href = "signup.php">Signup</a></li>
  </ul>
</nav>

  

请注意我在悬停中应用的灰色背景颜色效果。

它清楚地表明我在某个地方弄乱了位置，如果你能够启发溢出属性，这将是一个加分。

  

CSS

header > h1
{
  width: 100%;
  background-color: brown;
  height: 45px;
  color: white;
  text-indent: 65px;
  font-family: "Lucida Sans Unicode","Lucida Grande",Garuda,sans-serif;
  padding: 0;
  margin: 0;
}

nav ul li
{
  float:left;
  list-style-type: none;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s; 

}

nav > ul > li > a 
{
  position: relative;
  overflow: hidden;
  color: white;
  background-color: none;
  display: block;    
  line-height: .1em;
  padding: 0.5em 0.5em;
  text-decoration: none;
  margin-left: 80%;
}

nav  li > ul li a 
{
  color: #111;
  display: block;  
  line-height: 2em;
  padding: 0.5em 2em;
  text-decoration: none;
}

#navigation
{
  background-color: brown;
  margin: 0;
  overflow: hidden;
  height: 45px;
}

nav li:hover 
{
  background-color: #666;
}

Answer 1

这可能对你有所帮助，抱歉我的英语。

溢出：

fixed:     dependable window area, stays exactly where u point it
relative:  all child elements dependable to relative area
absolute:  dependable to a first upper relative area, scrolls with contents
static:    normal state

你也可以设置overflow-x：hidden以防止水平滚动条和overflow-y：overlay将滚动条放在内容的顶部。

<强>位置：

<div style='position: relative; width: 100px; height: 20px;'>
    <!-- THIS GOES TO TOP OF WINDOW LEFT CORNER AND STAYS THERE -->
    <div style='position: fixed; top: 0px; left: 0px;'></div>  

    <!-- THIS GOES TOP OF UPPER RELATIVE CONTENT RIGHT TOP CORNER -->
    <div style='position: absolute; top: 0px; right: 0px;'></div>
</div>
<div style='position: relative; overflow: hidden'>
    <!-- THIS DIV YOU JUST NOT BASICALLY SEE, BECOUSE OF OVERFLOW HIDDEN -->
    <div style='position: fixed; right: 0px; bottom: 0px;'></div>

</div>

<强>示例：

{{1}}

我希望这有助于你更好地理解它：）

Answer 2

这就是我得到它的方式，我认为，你想要的是什么？

删除 margin-left：80％，

将添加到您的CSS中

nav ul {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0px;
}
nav ul li {
    width: 25%;
    padding: 5px;
}

这有帮助吗？