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

Question

我的 li 标签之间有某种 space 我不知道它是从哪里来的？我该如何删除它？

此外，我想将 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 伪 class.

示例

li:hover a{color:#fff;}

More information on pseudo classes

然后回答你的第一个问题；将元素的 display 属性设置为 inline 或 inline-block 将导致它周围的白色 space 被视为与任何其他元素周围的 space 一样内联元素。

您可以通过多种方式解决它

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

<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然后对子元素"reset"设置它：

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

或者，如果您不是 100% 决定使用 display:inline-block，您可以改用浮动或 flexbox。

Answer 2

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

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

但是，只有文本可点击，li 元素不可点击。做同样事情的另一种方法是将所有 width/height/background 样式应用到 link，而不是 li.

Answer 3

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

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

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

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

Remove random padding from my UL LI?

html

css

padding

html-lists