Question

我的li标签之间有一些空间我不知道它来自哪里？我怎么能删除这个？

另外，我希望在悬停时将字体的颜色更改为白色

JSFIDDLE http://jsfiddle.net/omarel/tfyxL66c/

CSS

.nav_container {
 text-align: center;
 width:100%;

}
.nav_container ul {
/*  margin-top:15px; */
margin-left:30px;

}
.nav_container ul li {
display: inline-block;
text-align: center;  
padding-left:40px;
padding-right:40px;
margin:0px;
height:80px;
cursor:pointer;
}
.nav_container ul li:hover {
background-color:#08298A;
}

.nav_container a:hover {
    color:#fff;
}

header {
width:100%; 
margin: auto;
box-shadow:0 0 8px rgba(0,0,0,0.1);
min-width:410px;
}
.navlogo {
  z-index:99;  
}
.navlogo img {
width:100px;
margin:10px 10px 10px 10px;
}

.floatleft {
float:left;    
}
.floatright {
    float:right;    
}
.centerdiv {
 margin:0 auto;   
}
@media only screen and (min-width:700px) {

header {
max-width:1250px;  
}

.container {
    max-width:1250px;   
}

.box2 {

width:32%;
height:300px;
float:left;
}

.box2left {
width:65%;
height:600px;
float:left;
}


}

div {
border:solid 1px #E6E6E6;   
position:relative;
}

ul li {
    border:solid 1px #E6E6E6;  
}

HTML

        <div class="navlogo floatleft">
           <a href="/"><img src="images/logo.png" /></a>
        </div>

       <div class="floatleft">

          <div class="nav_container">
              <ul>
                  <li><a href="">Link 1</a></li>
                  <li><a href="">Link 2</a></li>
              </ul>
          </div>

        </div>
       <div class="floatright">

          <div class="nav_container">
              <ul>
                  <li><a href="">Profile</a></li>
                  <li><a href="">Sign out</a></li>
              </ul>
          </div>

        </div>


  </header>
<div style="clear:both;"></div>

Answer 1

首先回答你的第二个问题，因为答案更短：使用:hover伪类。

示例

li:hover a{color:#fff;}

More information on pseudo classes

回答你的第一个问题;将元素的display属性设置为inline或inline-block将导致其周围的空白区域被视为与任何其他内联元素周围的空间一样。

您可以通过多种方式解决此问题

从列表中删除所有换行符：

<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>

使用注释隐藏浏览器中的换行符：

<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>

使用CSS将父元素的font-size设置为0，然后＆＃34;重置＆＃34;它适用于子元素：

html{font-size:20px;} ul{font-size:0;} li{font-size:1rem;}

或者，如果您未使用display:inline-block 100％设置，则可以使用浮点数或弹性框。

Answer 2

要将链接的颜色更改为白色，请使用此css：

.nav_container ul li:hover a {
    color:white;
}

但是，只有文本可以点击，li元素将无法点击。另一种做同样事情的方法是将所有宽度/高度/背景样式应用于链接，而不是li。

Answer 3

正如Shaggy所提到的，为了在使用inline-block时消除额外的间距，您应该删除html中菜单li项之间的所有空格。

至于在悬停时更改链接颜色，您应该将以下内容添加到您的css代码中：

.nav_container li:hover a {
color:#FFF;
}

从我的UL LI中删除随机填充？

3 个答案: