PanelBar 扩展得太远，然后向上滑动答案

【问题标题】：PanelBar expands too far, then slides upPanelBar 扩展得太远，然后向上滑动
【发布时间】：2015-11-12 16:53:03
【问题描述】：

我有一个显示几个 div/UL 的面板栏。例如，当列表的宽度设置为 40% 时，会导致面板栏向下滑动比它应该的位置更远，然后跳回到它“应该”的位置。去掉 UL 上的 40%，一切正常。

2015.3.930 版本存在此问题，而旧版本（随机选择 2011.3.1407）则没有。

<ul class="doctypecontainer noselect">
    <li style="clear:both;">
        <span>Truck Freight Bill (1)</span>

        <div class="doctypecontainercontent">
            <div class="docdatelabel"><input type="checkbox" />10/27/2015</div>
            <ul class="pagelist">
                <li><input type="checkbox" /><span>Page 1</span></li>
                <li><input type="checkbox" /><span>Page 2</span></li>
                <li><input type="checkbox" /><span>Page 3</span></li>
            </ul>
            <ul class="pagelist">
                <li><input type="checkbox" /><span>Page 4</span></li>
                <li><input type="checkbox" /><span>Page 5</span></li>
                <li><input type="checkbox" /><span>Page 6</span></li>
            </ul>

            <div class="docdatelabel"><input type="checkbox" />11/15/2015</div>
            <ul class="pagelist">
                <li><input type="checkbox" /><span>Page 1</span></li>
                <li><input type="checkbox" /><span>Page 2</span></li>
                <li><input type="checkbox" /><span>Page 3</span></li>
            </ul>

            <div class="docdatelabel"><input type="checkbox" />11/21/2015</div>
            <ul class="pagelist">
                <li><input type="checkbox" /><span>Page 1</span></li>
                <li><input type="checkbox" /><span>Page 2</span></li>
                <li><input type="checkbox" /><span>Page 3</span></li>
            </ul>

            <span style="clear:left; display:block;"></span>
        </div>

    </li>
</ul>

在此处查看小提琴：http://jsfiddle.net/u48kLrem/

从 pagelist 类中删除 width:40%，它会按预期滑动。

【问题讨论】：

小提琴中的页面列表类在哪里？小提琴是不同的。
啊，疯了。我放错链接了。已更新。
这是由于应用了容器的display:none 和float:left 属性。控件未正确计算高度。您应该删除 width 属性，您可以在其位置添加 padding-right 以使组之间的距离相同。

标签： css kendo-ui kendo-panelbar

【解决方案1】：

我不知道，伙计。我怀疑它与文本换行（或某些换行）有关，并导致它错误计算高度。可能只是他们的编码不好，但是一个简单的修改会导致跳转消失。此外，此修改也应使其更可靠/面向未来。

.pagelist {
    padding-bottom:5px;
    list-style-type:none;
    padding-left:10px;
    width: 50%; /* change this to 50% */
    float: left;
    box-sizing: border-box; /* add this to force it to calculate
                               the padding in with the width to
                               total 50% */
}

演示：http://jsfiddle.net/jmarikle/2ekxpuu6/

【讨论】：

嘿，看起来是这样。非常感谢。出于好奇，为什么它更可靠/面向未来？
@BrianM。在大多数情况下，50% + 50% 更可能总是等于 100%，而不是 40% + 40% + 一些小于 20% 的像素值。尝试猜测始终小于 20% 的像素值时，您会引入不必要的复杂性，这可能会导致以后尺寸不正确。这在响应式应用程序上尤其成问题，因为您通常将宽度设置为某些列或容器的 100%。对于较窄的屏幕，您更有可能看到像素值超过 20% 的上限。最后，将两列设为 50% 会更简单。
哦，我以为你的意思是 box-sizing 位，但这也是有道理的。谢谢你的信息。
@BrianM。不客气。很高兴我能帮助你。对于box-sizing，它是齐头并进的。如果没有box-sizing，浏览器会将宽度计算为父级的 50% + 10px 的左侧填充，给定 100px 宽的容器将导致 60px 宽的列（50px 宽度和 10px 填充）。使用box-sizing:border-box，它在计算宽度时包含了内边距，所以在同样的场景中，50% 表示 50 像素（40 像素的宽度和 10 像素的内边距）。 border-box 的反义词是 content-box，它是默认值。