html - CSS - 防止字体系列和字母间距改变 div 和 ul 上的边距

Question

我有一个容器，其中包含一个旋转的 div 和一个无序列表。我试图让 div 和列表彼此齐平。我可以通过更改 div 和/或无序列表的边距来做到这一点。但是，当我更改整个文档的字体系列或字母间距时，它会更改 div 和 ul 之间的间距。

http://jsfiddle.net/

打开 fiddle 并使用检查器切换 * 上的字母间距属性以直观地了解我的意思。

    #container {
        z-index: 2147483645;
        height: 400px;
        width: 400px;
        background-color: grey;
        display: inline-block;
        position: fixed;
    }
    #tab {
        background-color: #9F8F6C;
        display: inline-block;
        vertical-align: top;
        height: 100%;
        width: 40px;
        padding: 0;
        margin: 0;
    }
    #tab a {
        position: fixed;
        width: 400px;
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        transform: rotate(-90deg) translateX(-100%);
        transform-origin:left top;

        font-size: 18px;
        cursor: pointer;
        text-align: center;
        color: #F5F5F5;
        text-decoration: none;
        padding: 0;
        margin: 0;
    }
    #my-list {
        background-color:rgba(255,255,255,0.5);
        display: inline-block;
        vertical-align: top;
        height: 100%;
        width: 65px;
        padding: 0;
        margin: 0;
    }
    * {
        letter-spacing: 2px;
    }

<div id='container'>
    <div id='tab'>
        <a id='tab-text'>hellloooo</a>
    </div>
    <ul id='my-list'>

    </ul>
</div>

Answer 1

如果我没理解错的话，你只需要将 letter-spacing 从 * 更改为 tab。

出于演示目的，我将您的ID 替换为类(因为ID[#] 在代码中必须是唯一的)。

下面是一个片段:

#container {
  z-index: 2147483645;
  height: 400px;
  width: 400px;
  background-color: grey;
  display: inline-block;
  position: fixed;
}
.tab {
  background-color: #9F8F6C;
  display: inline-block;
  vertical-align: top;
  height: 100%;
  width: 40px;
  padding: 0;
  margin: 0;
  /*letter-spacing:2px  APPLY HERE */
}
.tab a {
  position: fixed;
  width: 400px;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg) translateX(-100%);
  transform-origin: left top;
  font-size: 18px;
  cursor: pointer;
  text-align: center;
  color: #F5F5F5;
  text-decoration: none;
  padding: 0;
  margin: 0;
}
#my-list {
  background-color: rgba(255, 255, 255, 0.5);
  display: inline-block;
  vertical-align: top;
  height: 100%;
  width: 65px;
  padding: 0;
  margin: 0;
}
/*DEMO PURPOSES*/

.letter-spacing {
  letter-spacing: 2px 
}

<div id='container'>
  <div class='tab letter-spacing'>
    <a class='tab-text'>hellloooo</a>
  </div>
  <div class='tab'>
    <a class='tab-text'>hellloooo</a>
  </div>
  <ul id='my-list'>

  </ul>
</div>