Question

我的代码如下：

wrapper, wrapper2, content, footer, nav { 
    display: block;
}

html {
    width: 100%;
    height:100%;
    margin:0;
    padding:0;
    background-image:url('../images/gdmm.jpg');
    font-family: 'TitilliumWeb-ExtraLight';
    font-weight:900;
}
body{
    margin:0;
}

@font-face {
  font-family: 'TitilliumWeb-SemiBold';
  src: url('../TTfont/TitilliumWeb-SemiBold.eot');
  src: local("Grandesign Regular"), url("../TTfont/TitilliumWeb-SemiBold.ttf") format("truetype"); /* non-IE */

  font-family: 'TitilliumWeb-ExtraLight';
  src: url('../TTfont/TitilliumWeb-ExtraLight.eot');
  src: local("Grandesign Regular"), url("../TTfont/TitilliumWeb-ExtraLight.ttf") format("truetype"); /* non-IE */
}

h1 {
    font-weight: bold;
    font-size: 32px;
    margin-left:auto;
    border-bottom: 1px dashed rgb(221, 221, 221);
    font-weight: 300;
    line-height: 1.4;
    padding: 2px 25px;
    font-family: 'TitilliumWeb-SemiBold';
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Titillium Web","Source Sans Pro",Helvetica,Arial,serif;
}

#pagewrap{
    width: 100%;
    margin: 0 auto;
}

#content{
    width:1024px;
    height:768px;
    border-width:5px;
    margin-top:100px;
    margin-left:auto;
    margin-right:auto;
    word-wrap:break-word;
    background: rgba(252, 252, 255, 0.8);
    overflow:hidden;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
    word-wrap:break-word;
}

#contentinner{
    width:980px;
    height: 600px;
    background-color: rgb(252, 252, 255);
    margin-top:30px;
    margin-left:auto;
    margin-right:auto;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.2);
    word-wrap:break-word;
}

#text{
    font-size: 1.2rem;
    font-weight: 300;
    line-height: 1.6;
    padding: 5px 10px;
    word-wrap:break-word;
}

#navwrapper{
    width: 100%;
    height:50px;
    background-color:#005b96;
    padding:0;
    text-align: center;
    float:none;
    margin:0;
    text-decoration: none;
}

#navonderwrap{
    width: 100%;
    height:30px;
    background-color:#FFFFFF;
    padding:0;
    text-align: center;
    float:none;
    margin:auto;
}


nav{
    display: inline-block;
    overflow: hidden;
    word-spacing: 1em;
    text-align: center;
    margin:auto;
}

#navonder{
    display: inline-block;
    overflow: hidden;
    word-spacing: 1em;
    text-align: center;
    margin:auto;
}


nav ul{
    margin-right:20px;
    padding:0;
    width:auto;
}

nav ul li{
    display:table-cell;
    margin-right:20px;
}

nav li
{
    display:inline;
}

nav li a
{
    font-family:Arial;
    font-size:14px;
    float:left;
    padding:0px;
    border-bottom:1px;
    text-decoration: none;
}

nav li a:hover {
    display: block;
    float: left;
    background-color:#FFF;
    padding-bottom:10px;
}

我的问题是，当你将鼠标悬停在菜单上时，它会将整个事情推向我想要的只是它看起来好像它与下面的颜色相同，我无法弄清楚原因。

提前致谢！

Answer 1

这来自填充底部：10px你申请。

除此之外，您说将链接显示为块并使其浮动...所以您可以删除display：block;在那种情况下它没用。

Answer 2

nav li a {
     padding: 10px; //Add
}

nav li a:hover {
   background-color: #FFFFFF;
   display: block;
   float: left;
   padding-bottom: 10px; /// Remove this

}

删除padding bottom

Answer 3

在默认状态下，<a>没有填充，但在悬停状态下它有padding-bottom: 10px;。

为了让它看起来像加入下面的白条，你需要添加：

nav ul {
  margin-bottom: 0; /* to reset the default */
}

nav li a {
  font-family: Arial;
  font-size: 14px;
  float: left;
  /* padding: 0px; REMOVE */
  padding-bottom: 10px; /* ADD */
  border-bottom: 1px;
  text-decoration: none;
}

nav li a:hover {
  /*display: block; REMOVE (unnecessary) */
  /* float: left; REMOVE (because it's already set on default state) */
  background-color: #FFF;
  /* padding-bottom: 10px; REMOVE (because it's already set on default state */

}

CSS的问题（很小但无法弄清楚）

3 个答案: