html - 容器 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。我通过将 picture 和 a 与 div 重新分组来更改了 innerHtml，并且我使用了 div 而不是您的 a 元素。

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

Plunker

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