javascript - html - css block 宽度/高度

Question

我有以下 CSS 代码:

#nav {}
#nav a { 
         position: relative;
         display: inline-block;
         color: #F0F0F0;
         width: 1em;
         height: 2em;
         line-height: 0.9em;
}
#nav a.icon:before { padding-right: 0;} 

<nav id="nav">
  <a href="#me" class="fa fa-home active"><span>Home</span></a>
</nav>

但如果文本长度超过 10 个字符，它会自动生成一个段落，使文本脱离原始框。我怎样才能防止这种情况发生？

---

编辑

---

我希望屏幕截图中的背景框随着文本变长而宽度变大

http://prntscr.com/2cd973

Answer 1

如果您的目标是将其全部显示在同一行上，则只需删除 width:1em;来自#nav a

如果您想 overflow hidden 的文本，请添加 overflow:hidden;至#nav a

如果你想要a标签以适应其内容的高度和宽度删除 width:1em;和height:2em;来自#nav a