Question

我对定位导航栏有疑问。出于某种原因，每当我进入网页时，导航栏都没有固定到页面顶部。这是一个例子：https://gyazo.com/a856b5dcaadc3b8729f054ddb7387417

导航栏从浏览器顶部和侧面有一小部分，有没有办法拉伸/展开它，使其像Stack Overflow导航栏一样适合？

例如。

HTML：

<html lang="en">  
  <head>  
    <title>CSGOCarry.com | Win Big!</title>
    <link rel="stylesheet" type="text/css" href="csgositecss.css">  
  </head>

  <body>  
    <div class="container">
      <div class="center">
        <h1>Welcome to CSGOCarry</h1>
        <h3>Where Dreams Come True</h3>
      </div>
    </div>
    <div class="navbar">
      <ul>
        <li><a href="default.asp">Home</a></li>
        <li><a href="Jackpot.asp">Jackpot</a></li>
        <li><a href="Coinflip.asp">Coinflip</a></li>
        <li><a href="roulette.asp">Roulette</a></li>
      </ul>    
  </body>
</html>

CSS：

body {
  background-image: url("csgocarryback.jpg");
  background-size: 100%;
}

h1 {
  color:white; 
  text-align:center; 
  font-size:58px;
}
h3 {
    text-align:center;
    color:white;
    font-size: 28px;
    margin-top: -40px;
}
.container {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
}

ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #333;
}

li {
     float: left;
}

li a {
      display: block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
}

/* Change the link color to #111 (black) on hover */
li a:hover {
      background-color: #111;
}

Answer 1

试

int a = 100;
string str = $"{a:0.00}";
Console.WriteLine(str);

确保结束.navbar{ margin: -10px; }

我可以看到图片与导航条发生碰撞，所以如果你想添加<div class="navbar">来避免这种情况。

position: relative;

这是JSFiddle：https://jsfiddle.net/vtrvjwee/

Answer 2

这是margin的默认body。你需要重置你的css。

body {
 background-image: url("csgocarryback.jpg");
 background-size: 100%;
   margin: 0;
}

它也不完全是10px。检查以下问题 -

HTML default body margin

定位导航栏

2 个答案: