Question

我有一个居中的包裹（固定宽度和动态填充）和一些p标签。这些标签的backgroundColor必须扩展到左侧的浏览器边框，但内容仍应保留在居中的内容区域内。

我设法使用JavaScript（Example）。

HTML：

<div>
    <p>asd</p><br>
    <p>asd</p><br>
    <p>asd</p>
</div>

JS：

$(document).ready(function() {
    $('p').css('padding-left', $('div').css('padding-left')).css('margin-left', "-" + $('div').css('padding-left'));
});

CSS：

div {
    width: 300px;
    background: green;
    padding: 0 calc(50% - 150px)
}

p {
    height: 50px;
    margin-bottom: 10px;
    background: blue;
    display: inline-block;
}

但我希望它只与css一样。有没有办法在没有JavaScript的情况下获得这种行为？

必须支持FF，Chrome，iPad iOS5 / 6 Safari，IE9 +。

/编辑：

感谢目前为止的回复。我在p元素上使用了内联块，使其不向右延伸，因为它应该像内联元素一样，具有所需的最小宽度。但是我仍然希望下一个元素处于一个新的界限（如果有更好的解决方案，欢迎它）

感谢PaulvdTool，我找到了 SOLUTION ： http://jsfiddle.net/EFhkH/2/

尽管如此，如果您有更好的想法在内联块之后强制换行，那么欢迎您

Answer 1

你想要发生的事情（正如我从你的描述中得到的那样）甚至没有在你的小提琴中喋喋不休。当我调整屏幕大小时，蓝色不会留在左侧。我尝试用CSS制作它，我通过使用：before元素管理了一下。该效果仅适用于单行文本。

也许有人可以延伸这个。

CSS

#container {
    width: 300px;
    background: silver;
    margin: 0 auto 0 auto;
}
.text {
    width: 100%;
    background: gray;
}
.text:before {
    content: ".";
    background: gray;
    width: 50%;
    position: absolute;
    left: 0;
    z-index: -1;
    color: gray;
}

HTML

<div id="container">
    <div class="text"><p>line 1</p></div>
    <div class="text"><p>line 2</p></div>
    <div class="text"><p>line 3</p></div>
    <div class="text"><p>line 4a<br />line 4b</p></div>
/div>

http://jsfiddle.net/PaulvdDool/rtRQD/

编辑我通过添加点“”来作弊。“在before元素中，否则背景没有显示。我通过给它提供与背景颜色相同的颜色来使点不可见。

在没有javascript的情况下将元素扩展到居中包装内的浏览器边框

1 个答案: