菜单栏右端的空格

Question

我是HTML和CSS的新手，这是我的第一个项目。

我有这个＆＃34;空间＆＃34;靠近导航栏的末尾，它强制下一个链接进入一个新行。此外，无论屏幕大小如何，我找不到能够消除背景图像和导航栏之间差距的解决方案。

我无法确定导致这些问题的原因，我确定这只是一个小错误。

navbar http://prntscr.com/g0xi6z

＆＃13;

＆＃13;

.topnavhome nav {
  position: relative;
  display: block;
  margin: 0px;
  background-color: #333333;
  overflow: hidden;
  text-align: justify;
  font-size: 0px;
  min-width: 500px;
  width: 100%;
}

.topnavhome:after  {
  content: '';
  display: inline-block;
  width: 100%;
}

.topnavhome .li {
  display: inline-block;
}

.topnavhome nav li a {
  float: left;
  display: block;
  padding: 12px;
  width: 180px;
  margin-bottom: -1.5px;
  color: #f2f2f2;
  border-left: solid 3px #333333;
  text-align: center;
  text-decoration: none;
  font-family: 'Lato', sans-serif;
  font-size: 20px;
  -webkit-transition: background .3s linear;
   -moz-transition: background  .3s linear;
   -ms-transition: background .3s linear;
   -o-transition: background .3s linear;
   transition: background .3s linear;
}

.topnavhome nav a:hover {
  background-color: #046A78;
  color: white;
  border-left: solid 3px #79CBD6;
  -moz-transition: background-color 0.01s;
  -webkit-transition: background-color 0.01s;
  -o-transition: background-color 0.01s;
  transition: background-color 0.01s;
}

＆＃13;

<ul class="topnavhome" id="myTopnav">
    <nav>
    <li><a href="../html/home.html">Home</a></li>
        <li><a href="../html/networksecurity.html">Network Security</a></li>
    <li><a href="../html/passwords.html">Passwords</a></li>
    <li><a href="../html/firewalls.html">Firewalls</a></li>
    <li><a href="../html/encryption.html">Encryption</a></li>
    <li><a href="../html/biometric.html">Biometric Devices</a></li>
    <li><a href="../html/references.html">References</a></li>
   </nav>
  </ul>

＆＃13;

＆＃13;

＆＃13;

Answer 1

修复错误：

* {
  box-sizing: border-box;
} 

更多用于设置导航使用的css：

.topnavhome {
  padding: 0;
}

并定义nav和a元素的高度。

body, ul {
  margin:0;
}

* {
  box-sizing: border-box;
} 

.topnavhome {
  padding: 0;
} 

.topnavhome nav {
  position: relative;
  display: block;
  margin: 0px;
  background-color: #333333;
  overflow: hidden;
  text-align: justify;
  font-size: 0px;
  min-width: 500px;
  width: 100%;
  height: 90px;
}

.topnavhome:after  {
  content: '';
  display: inline-block;
  width: 100%;
}

.topnavhome li {
  display: inline-block;
}

.topnavhome nav li a {
  float: left;
  display: block;
  padding: 12px;
  width: 180px;
  margin-bottom: -1.5px;
  color: #f2f2f2;
  border-left: solid 3px #333333;
  text-align: center;
  text-decoration: none;
  font-family: 'Lato', sans-serif;
  font-size: 20px;
  -webkit-transition: background .3s linear;
   -moz-transition: background  .3s linear;
   -ms-transition: background .3s linear;
   -o-transition: background .3s linear;
   transition: background .3s linear;
   height: 90px;
}

.topnavhome nav a:hover {
  background-color: #046A78;
  color: white;
  border-left: solid 3px #79CBD6;
  -moz-transition: background-color 0.01s;
  -webkit-transition: background-color 0.01s;
  -o-transition: background-color 0.01s;
  transition: background-color 0.01s;
}

<ul class="topnavhome" id="myTopnav">
  <nav>
    <li><a href="../html/home.html">Home</a></li>
    <li><a href="../html/networksecurity.html">Network Security</a></li>
    <li><a href="../html/passwords.html">Passwords</a></li>
    <li><a href="../html/firewalls.html">Firewalls</a></li>
    <li><a href="../html/encryption.html">Encryption</a></li>
    <li><a href="../html/biometric.html">Biometric Devices</a></li>
    <li><a href="../html/references.html">References</a></li>
   </nav>
</ul> 

Answer 2

关于导航栏末端附近的“空格”强制下一个链接进入新行，你有这个问题因为没有足够的地方可以放入，你需要使用“@media queries”，所以当你减小宽度时，它会很好地适应。例如，在我的屏幕上，我没有这样的问题

以下是使用@ media-query

的好例子的链接

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

接下来，您的<ul>高度大于<nav>。导航导航高度无法帮助的原因是你的<ul>之后有内容，导航后会占据一席之地。

只需删除该行：

.topnavhome:after  {
    content: '';     <------- delete this one
    display: inline-block;
    width: 100%;
}

Answer 3

您有180px到.topnavhome nav li a的固定宽度，这会使li堆叠起来，因为它们不适合容器宽度。

尝试使用flex，将宽度平均分为li

nav { display: flex;}
nav li { flex: 1;}

Answer 4

请尝试以下代码。

这里你的css效果不好，因为所有li元素都不适合容器，因为这个原因显示在新行中。

只需添加下面的类。如果它们已经更新了属性。

ul#myTopnav {
    -webkit-padding-start: 5px;
}

这里我只改变了宽度和宽度。填充。

.topnavhome nav li a {
    padding: 12px 6px 12px 6px;
    width: 172px;
}

如果@media查询不适合小屏幕或大屏幕，还可以使用另一件事。

希望这有帮助。