Question

好吧，我已经把头撞到了这堵墙上一段时间了。

我有一个位于导航栏下方页面顶部的标签。该选项卡显示＆＃34;登录＆＃34;链接，或者，如果他们已登录，他们的用户名和＆＃34;注销＆＃34;链接。

选项卡（user-tab）设置为display:inline-block; width:auto;，部分工作，但最后一个子元素总是部分截止，至少在以下情况之前：1）刷新窗口，2）窗口调整大小，或3）我尝试通过Web检查器更改CSS。在我做了这三件事之后，它开始表现正常。它在所有主流浏览器中都是相同的行为。我尝试了overflow:hidden诀窍，我试图去除填充，让白色空间正常; 无效。

应该看起来像：

______________________________________
|  John Doe    My Offers     Logout  |
--------------------------------------

但看起来像：

_______________________________
|  John Doe    My Offers     Logout 
-------------------------------

以下是代码：

＆＃13;

.content {
  position: relative;
  width: 100%;
  height: 83%;
}
.user-tab {
  position: absolute;
  width: auto;
  /* overflow:hidden; */
  display: inline-block;
  right: 2%;
  z-index: 1;
  padding: 0.35% 1%;
  white-space: nowrap;
  background:#f00;
}
.user-tab a {
  display: inline-block;
  padding: 0 3%;
}

＆＃13;

<div class="content">
  <div class="user-tab">
      <a href="">
        <span class="icon-user"></span>
        John Doe
      </a>


      <a href="">
        <span class="icon-cart"></span>
        My Offers
      </a>
 
      <a href="">
        <span class="icon-cancel-circle"></span>
        Logout
      </a>

  </div>
</div>

＆＃13;

发生了什么以及如何解决这些问题？它清楚地了解它应该如何工作，但只有在我醒来之后才会这样做。

编辑：有趣的是，它并没有在＆＃34; Run Snippet＆＃34;中出现这个问题。部分，但在下面链接的jsFiddle中，它正在重现这个问题。

Answer 1

您可以尝试将position:absolute替换为float: right，因为绝对定位可能会产生一些有趣的副作用，这些副作用可能很难理解，float: right非常简单地浮动元素在右边。如果你想要它稍微超过（类似于右：2％）

，你可以为元素添加边距

Answer 2

FYI当您使用百分比填充以及宽度/高度等时，您会让自己感到悲伤。特别是使用ie浏览器。即将填充添加到div的大小请参阅：http://www.w3schools.com/css/css_boxmodel.asp 避免出现问题的最佳方法是，如果已指定宽度并为其中的元素添加边距/填充，则应避免水平填充。

摆脱浮动或绝对，这没有意义。

如果你选择保持浮动，你也可以使用位置相对而只是让它有一个负的上边距。

确保您的广告溢出：您的容器可见，这可能就是它将其切断的原因。

inline-block div最初没有扩展内容

2 个答案: