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

【问题标题】：Remove random padding from my UL LI?从我的 UL LI 中删除随机填充？
【发布时间】：2015-06-23 04:51:25
【问题描述】：

我的 li 标签之间有某种空间，但我不知道它来自哪里？我怎样才能删除它？

另外，我想在 li 悬停时将字体颜色更改为白色

JSFIDDLEhttp://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>

【问题讨论】：

标签： html css html-lists padding

【解决方案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>

使用 cmets 对浏览器隐藏换行符：

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

使用 CSS 将父元素的 font-size 设置为 0，然后为子元素“重置”它：

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

或者，如果您没有 100% 确定使用 display:inline-block，则可以使用浮动或 flexbox。

【讨论】：

这很好，但我很好奇为什么 padding:0 或 margin:0 不会阻止这种情况？所有内联元素都会发生这种情况吗？
因为它既不是填充也不是边距。为了说明发生了什么，将ul 更改为p，将lis 更改为spans。这与将元素（否则为块元素）设置为 display 为 inline 或 inline-block 时的行为完全相同
我已更新此内容以正确回答您的第二个问题。您问如何在将鼠标悬停在 li 上时更改 a 的颜色，我的原始答案仅在悬停在 a 上时更改了颜色。

【解决方案2】：

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

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

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

【讨论】：

列表嵌套的 div 也应该包含在内，以避免同一页面上列表中的其他潜在链接也改变颜色。
是的，我刚刚意识到这似乎不是很好的可用性。我将尝试与链接相同

【解决方案3】：

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

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

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

【讨论】：