Question

所以我只是用简单的HTML和CSS做这件事，因为我有点新鲜。我从w3schools复制导航栏（仅用于练习，显然不是为了商业），我遇到了这个问题。这是我的HTML和CSS，如果您知道错误，请告诉我以及如何解决它。

HTML：

＆＃13;

body {
  font-family: 'Lato', 'Arial', 'Helvetica', sans-serif;
}
ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
}
ul.topnav li {
  float: left;
}
ul.topnav li a {
  display: inline-block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 17px;
}
ul.topnav li a:hover {
  background-color: #555;
}
ul.topnav li.resize {
  display: none;
}

＆＃13;

<ul class="topnav" id="myTopnav">
  <li><a href="#home">Home</a>
  </li>
  <li><a href="#news">News</a>
  </li>
  <li><a href="#contact">Contact</a>
  </li>
  <li><a href="#about">About</a>
  </li>
  <li class="resize">
    <a href="javascript:void(0);" onclick="myFunction()">&#9776;</a>
  </li>
</ul>

＆＃13;

Answer 1

如果我理解正确，您想要修复导航栏左侧的空白区域。除了CSS的可怕组织（请参阅代码片段以获得更好的组织），您需要向left: 0添加.topnav以使其从屏幕左侧获得0（单位）。

＆＃13;

body {
  font-family: 'Lato' , 'Arial' , 'Helvetica' , sans-serif;
}
ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;  
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
  left: 0;
} 
ul.topnav li {
  float: left;
}
ul.topnav li a {
  display: inline-block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 17px;
}
ul.topnav li a:hover {
  background-color: #555;
}
ul.topnav li.resize {
  display: none;
}

＆＃13;

<body>
<ul class="topnav" id="myTopnav">
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
    <li class="resize">
        <a href="javascript:void(0);" onclick="myFunction()">&#9776;</a>
    </li>
</ul>

＆＃13;

Answer 2

你能在这里查看吗？这是你需要的吗？

＆＃13;

body {
font-family: 'Lato' , 'Arial' , 'Helvetica' , sans-serif;} ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
left:0;
width: 100%;} ul.topnav li {float: left;} ul.topnav li a {
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
line-height: 20px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;}ul.topnav li a:hover {background-color: #555;} ul.topnav li.resize {display: none;}

＆＃13;

<ul class="topnav" id="myTopnav">
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
    <li class="resize">
        <a href="javascript:void(0);" onclick="myFunction()">&#9776;</a>
    </li>
</ul>

＆＃13;

导航栏没有完全显示（空格）？

2 个答案: