html - CSS EM 测量搞砸了?

标签 html css margin font-size

我在使用 em 单位时遇到问题,我已将导航列表宽度设置为 6.250em,相当于 100px,并且工作正常。当我将每个 li 的宽度更改为 6.250em 时,它不会拉伸(stretch)到与导航列表相同的宽度。为什么会发生这种情况,我该如何解决?

CSS 代码:

.navlist {
  width: 100px;
  height: auto;
  float: left;
  margin: 0;
  padding: 0;
  list-style-type: none;
  background-color: #000; 
}
.navlist li {
  font-weight: bold;
  font-family: sans-serif;
  font-size: 14px;
  text-align: center;
  text-transform: uppercase;
  text-shadow:0px 1px #14161A; 
}
i {
  font-size: 26px;
  padding-bottom: 6px;
}
a.nav-buttons {
  width: 6.250em;
  height: 60px;
  display: block;
  display: table-cell;
  vertical-align: middle;
  color: #CCC;
  text-decoration: none;
  background-color: #666;
  border-top: 1px solid #2E3139;
  border-bottom: 1px solid #14161A; 
}
a.nav-buttons:hover, a.nav-buttons:focus {
  color: #fff;
}

HTML代码:

<ul class="navlist">
    <li><a href="#" class="nav-buttons"><i class="fa fa-home"></i> Home</a></li>
    <li><a href="#" class="nav-buttons"><i class="fa fa-info-circle"></i> About</a></li>
</ul>

JSFiddle 在这里:http://jsfiddle.net/2ZT9w/1/

最佳答案

em 是相对于它们的父级的,所以 li 是相对于 nav 而不是 nav 的父级的。您在 li 上重置了字体大小。假设它与导航上的不同,这也会将 li 上的 em 值更改为 1em=14px。

如果 navlist 的字体大小从未改变,并且等于 body 的默认大小,即 16px,那么这就是你的问题,因为 navlist 上的 1em 等于 16px,而 li 上的 1em 等于 14px。

关于html - CSS EM 测量搞砸了?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22592921/

相关文章:

javascript - 操作内存中 jQuery 对象的 textarea 值

javascript - JQuery click() 在控制台中触发事件,但从 JS 文件调用默认值

jquery - 如何在他们的 click jquery 上交换两个链接

javascript - header 更改其位置 :[fixed] after keyboard popup in Ipad

javascript - 如何使用 javascript 修改样式表规则以将后代选择器添加到每个规则的前面?

html - 为什么元素不在页面中心(边距 :auto)

html - 在 IE 和 CHROME 中页脚下的奇怪边距/填充,Firefox 是很好的 CSS

jquery - 切换内部无序列表

javascript - 使用 pureJS 拖放,无后端

html - CSS - 完全删除列之间的间距?