2

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

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

div 文本被剪切

但是，当我按下 时F5，页面会自动将自身调整回此：

刷新后div文本未剪切

为什么会这样？我该如何解决？我被这部分难住了，我什至尝试过高级 CSS 函数，例如calc, 等等。

我无法在 jsFiddle 上复制问题，但我确实提供了我正在使用的代码。

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>

CSS

.breadcrumbz { padding:6px 6px 6px 6px; margin:2% 0 0 4%; position:relative; background-color:#3b3c3e; float:left; }
.breadcrumbz ul { white-space:nowrap; float:left; }
.breadcrumbz ul li { display:inline; }
.breadcrumbz ul li:first-child a { padding:0 4% 0 0; }
.breadcrumbz ul li a { padding:0 4%; }
.breadcrumbz ul li span { padding:0 4%; }
.breadcrumbz ul li:last-child a { padding:0 0 0 4%; }
.breadcrumbz ul li.single { padding:0 0 0 4%; }
4

4 回答 4

2

您需要更改 li 的显示样式。尝试将“inline-block”替换为“inline”。

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

检查这个http://jsfiddle.net/Yg58f/。希望能帮助到你。

于 2013-08-04T10:53:54.817 回答
2

这是导致它的百分比，浏览器在呈现内容之前不知道宽度是多少，并且内容边缘的百分比是基于宽度的。（一种先有鸡还是先有蛋的问题。）

您还有无效的 html（<span>不允许作为 的子级<ul>）。

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

示例位于http://jsfiddle.net/sdMTJ/5/

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

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

http://jsfiddle.net/sdMTJ/9/

于 2013-08-04T10:38:32.007 回答
1

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

演示http://jsfiddle.net/kevinPHPkevin/sdMTJ/8/

.breadcrumbz ul li.single { padding:0 0 0 0.625em; }

于 2013-08-04T10:47:24.303 回答
1

尝试这个：

.breadcrumbz ul li {
   display: inline-block;
}
于 2013-08-04T11:22:17.030 回答