Html div内的文本溢出。。。但只有在刷新后才能恢复正常

我正在做一个动态div，它会根据文本量调整大小。（这意味着我无法定义主div的宽度）

问题是，对于，这是第一次加载页面时发生的情况：

但是，当我按F5时，页面会自动调整自身大小，使其恢复到以下状态：

为什么会这样？我如何解决它？这一部分让我感到困惑，我甚至尝试过高级CSS功能，如

calc

，等等

我无法在JSFIDLE上复制这个问题，但我提供了我正在使用的代码

HTML

<div class="breadcrumbz">
    <ul id="breadcrumbs" class="uppercase">
        <li><a href="http://localhost/adsg">Home</a></li>
        <span>/</span>
        <li><a href="http://localhost/adsg/blog/" title="View all posts in blog" rel="category tag">blog</a></li>
        <span>/</span>
        <li class="single">On the Go.</li>
    </ul>
</div>

---

这是百分比造成的，浏览器在呈现内容之前不知道宽度是多少，内容边距中的百分比基于宽度。（一种鸡和蛋的问题。）

您还有无效的html（

不允许作为

的子项）

如果更改百分比的单位，则不会出现此问题

样品在

---

旁注：可以使用伪元素在元素之间添加分隔符，而不是无效的跨度

li + li:before {
    content: " / ";
}

---

百分比和填充可以对没有设置宽度的浮动项目产生这种影响，尤其是。为了可靠性，我建议您使用

em

，而不是

%

演示

---

.breadcrumbz ul li.single{padding:0.625em；}

您需要更改li的显示样式。尝试“内联块”而不是“内联块”

看看这个。希望有帮助。

试试这个：

.breadcrumbz ul li {
   display: inline-block;
}

---

请在此处显示代码的相关部分，不必转到JSFIDLE查看。您是否尝试过清除浏览器缓存/不同的浏览器？可能不是解决办法，但值得一试。我得到的另一个想法是，div只在内容已经显示后才能正确缩放清除浏览器历史记录和Cookie并重试您使用的html无效（span不能是ul的直接子元素）@Sumurai8是的，我注意到，我已经使用了xec的方法。如果有人需要知道，是

标记的填充百分比导致了浏览器的不规则性。谢谢你对xec的帮助，别忘了还有其他的帮助。保持它很棒！

.breadcrumbz ul li { display:inline-block; }

.breadcrumbz ul li {
   display: inline-block;
}