Question

请看一下这个小提琴：http://jsfiddle.net/eKJAj/37/。 HTML很简单：一个容器＆＃39;具有父母＆＃39;的可滚动元素孩子，反过来又有＆＃39; bar＆＃39;和＆＃39;内容＆＃39;儿童。内容＆＃39; element的宽度是动态的，但是对于此示例，已设置为等于容器的宽度+ 100px。我在这里复制了CSS中最相关的位：

.container {
    max-width: 300px;
    overflow-x: auto;
}

.parent {
    position: relative;
    width: auto;
}

.bar {
    position: absolute; 
    top: 10px;
    width: 100%;
}

.content {
    width: 400px;
}

正如您在小提琴中所看到的，当您向右滚动时，红色条的宽度受到父母宽度的限制。元素，其宽度反过来似乎被设置为＆＃39;可见＆＃39;宽度，即未被容器夹住的宽度＆＃39;元件。只要看看黄色背景，就会发现情况就是这样。

我想要完成的是红色条一直向右移动，只有在父元素一直向右移动时才会出现这种情况（完全包含内容＆＃39） ;孩子），而不是通过滚动“视口”来限制其宽度。

任何人都有一些想法使用CSS来实现这一目标？我不想使用jQuery或类似的东西。我认为这应该只适用于CSS。遗憾的是，不能为父母设置一个固定的宽度＆＃39;元素（这将是一个非常简单的解决方案...），因为＆＃39;内容的宽度＆＃39; element是动态的（甚至可能小于＆＃39; container＆＃39;元素的宽度）。＆＃39; bar＆＃39;元素被移入＆＃39;内容＆＃39;要素，它必须是“父母”的直接孩子。元件。

Answer 1

如果您希望div获取整个widht内容，则需要更改block行为。试试这个：

.parent {
    display:inline-block;
}

检查 UpdatedFiddle

如何将子元素的宽度设置为全宽而不是“可见”宽度（由overflow-x：auto剪裁）

1 个答案: