导航列表项在悬停时占用了过多空间

debugcn 发表于 Dev

Mahesh jaganiya

当我将鼠标悬停在“新闻简报”上时，它占用了很大的空间，我试图调整边距，但是什么也没有发生，并且我也尝试过margin-left，margin-right但是问题是相同的。下面是代码：

hr {
  margin: 0px;
}
body {
  background: url(../images/bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  word-wrap: break-word;
}
h1 {
  font-family: "Sacramento";
  color: #F0FFF0;
}
.title >h1 {
  color: #222;
  transition: color 2s;
}
.title:hover >h1 {
  color: #6565f0;
}
.title {
  line-height: 40px;
  margin-top: 0px;
  margin-bottom: -22px;
  font-size: 19px;
  transition: font-size 0.4s;
}
.title:hover {
  font-size: 22px;
}
.nav ul {
  background-color: transperent;
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
}
.nav li {
  font-family: 'Oswald', sans-serif;
  font-size: 1.2em;
  line-height: 40px;
  margin-top: 10px;
  height: 40px;
  border-bottom: 1px solid #888;
  transition: font-size 0.4s;
}
.nav li:hover {
  font-size: 1.6em;
}
.nav a {
  text-decoration: none;
  color: #222;
  display: block;
  transition: .3s background-color;
}
.nav a:hover {
  background-color: #005f5f;
}
.nav a.active {
  background-color: #fff;
  color: #444;
  cursor: default;
}
@media screen and (min-width: 600px) {
  .nav li {
    width: 120px;
    border-bottom: none;
    height: 50px;
    line-height: 50px;
    font-size: 1.4em;
  }
  /* Option 1 - Display Inline*/
  .nav li {
    display: inline-block;
    margin-right: 10px;
    margin-left: 10px;
  }
}

<font align=center>
  <div class="title">
    <h1>Welcome</h1>
  </div>
</font>
<hr />
<div class="nav">
  <ul>
    <li class="home"><a href="#">Home</a>
    </li>
    <li class="tutorials"><a href="#">Tutorials</a>
    </li>
    <li class="about"><a href="#">About</a>
    </li>
    <li class="news"><a href="fb.com" target=_blank>Newsletter</a>
    </li>
    <li class="contact"><a href="#">Contact</a>
    </li>
  </ul>
</div>
<hr style="margin-top:5px;" />

阿伦·库马尔（Arun Kumar M）

将li的宽度更新为width：130px;