使用“margin：0 auto;”和无内部div的背景颜色

我想要一个使用自动左/右边距的居中块，但我也希望它具有背景色。由于背景颜色不适用于块的边缘区域，因此我使用背景颜色设置的块，然后使用带有自动边距的内部块。使用“margin：0 auto;”和无内部div的背景颜色

我不喜欢这样，因为它需要额外的标记。有没有一种技术可以实现这一点，而只使用一个块？

更新：澄清，我想只有一个块，而不是两个，实现同样的事情;在下面的例子中，我想删除内部div。我使用的是目前

裸露的骨头代码：

<section id="example"> 
    <div id="inner"> 
     <h1>Example</h1> 
     <p>Example content.</p> 
    </div> 
</section> 

<style> 
    #example { 
     background-color:#ccc; 
    } 
    #inner { 
     margin:0 auto; 
     padding:10px 0; 
     width:500px; 
     background:white; 
    } 
</style>

找不到任何搜索网站或谷歌。

由于提前，奈杰尔

来源

2013-07-27 SuperDuperApps

这是令人困惑的问题。你应该模拟一个jsfiddle.net来解释问题所在。尽管阅读了5次以上，但我实际上无法确定您的问题。（也许你只是想要框大小） – Layke

据我所知，奈杰尔希望一个元素少（#inner），但是相同的视觉效果 – Martijn

是的，正如Martinijn所说。我想要实现同样的事情，而不必使用两个块。在这种情况下，一个部分和一个内部div。对不起，不清楚，会更新问题来澄清。 – SuperDuperApps

因为你想在div＃内为中心，这将永远是父母。在这种情况下，另一个元素#portfolio，但它也可以是正文。这个解决方案完全可以接受。

你可以尝试添加负边距和一些填充，但是你会分配一些复杂的东西。你现在所拥有的东西，一个满足宽度并给出完整背景色的元素，以及一个定位在中心的元素

来源

2013-07-27 14:09:12 Martijn

我也尝试过'padding：0 auto;'只是为了它的乐趣，但那是行不通的。本来会很有趣的 – Martijn

是的尝试过自动填充，太遗憾了，它不起作用，这将是一个不错的解决方案。感谢你的回答。 – SuperDuperApps

对不起第二条评论，但你说得很好，我所用的并不是真的无关紧要，它确实有意义，这里有两个街区。会咀嚼的。我只是不喜欢纯粹出于造型目的的标记。这似乎应该可以实现一个街区。 – SuperDuperApps

如果您有一组固定的块元素，您可以设置边距对所有#example的孩子。 Here是一个jsFiddle。

问题是你保存在HTML标记中，你浪费在CSS中，并且假设你只有块儿童。例如，添加一个<span>标签会打破这个流程，它们本身需要包装在一个块容器中。

HTML

<section id="example"> 
     <h1>Example</h1> 
     <p>Example content.</p> 
</section>

CSS

#example { 
     background-color:#ccc; 
} 
#example > * { 
    width: 200px; 
    margin: 0 auto; 
}

来源

2013-07-27 14:13:09 CodingIntrigue

这将工作，如果这是所有的内容将永远在这里。如果他得到更多的HTML，他将需要重写它现在的情况。我喜欢这个想法 – Martijn

准确（*如果你有一组固定的元素*）。 OP没有更好的解决方案，在我看来，只是其他选择。 – CodingIntrigue

我也喜欢这个想法，虽然对于你建议的理由不太理想，不得不为所有类型的儿童提供所有额外的CSS。 – SuperDuperApps

使用“margin：0 auto;”和无内部div的背景颜色

回答

相关问题