容器div移动时固定定位的文本

Question

调用我的函数使侧边栏宽度从0px更改为418px时，我希望列表中的文本保持不变。但是，如果我只使用position：fixed，它会在显示侧边栏之前显示文本。无论如何，当它的父div改变大小时，文本是否保持对齐？

#sidebar ul li {
    display:inline;
    list-style-type:none;
    float:left;
    margin:0;
    border-bottom:1px solid #c6d0da;
    height:57px;
    padding:10px 0px;
}

Javascript函数增加侧边栏大小：

function menu() {
    document.getElementById("sidebar").style.width = "418px";
    document.getElementById("content").style.marginLeft = "450px";
}

Answer 1

我更新了你的代码，但它在侧边栏内部有点css。 我通过重新组合图片和一个div来改变你的innerHtml，我使用了div而不是你的元素。

请不要使用这样的ID，ID应该是唯一的。请改用类。如果您想编写更好的javaScript代码，也可以使用JQuery。它比原生javascript更容易使用。

Plunker

#icon-li > div {
  white-space: nowrap;
}
#icon-li > div > * {
  display:inline-block;
  white-space: nowrap;
}