0

em 単位に問題があります。navlist の幅を 100px に相当する 6.250em に設定しましたが、正常に動作しています。各 li の幅を 6.250em に変更すると、navlist と同じ幅にはなりません。これはなぜ起こり、どうすれば修正できますか?

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/

4

1 に答える 1

0

ems は親に対して相対的であるため、li は nav に対して相対的であり、nav の親ではありません。li のフォント サイズをリセットします。nav の値とは異なると仮定すると、li の em の値も 1em=14px に変更されます。

navlist のフォント サイズが変更されておらず、本文のデフォルト サイズである 16px と等しい場合、navlist の 1em は 16px になり、li の 1em は 14px になるという問題があります。

于 2014-03-23T15:40:53.843 に答える