1

是否可以堆叠行内块元素？

我有一个 DIV，我希望其中的元素（h1 和 P）居中。所以我将 DIV 设置为 text-align center 并将 H1 和 P 标签分别设置为 inline-blocks。

想法是将两个元素（H1 和 P）显示为行内块元素，以便内容居中，并且在文本长度的背景中显示透明 png。

但是我遇到的问题是，将元素作为内联块意味着它们将彼此相邻出现（我不希望这种情况发生），所以我将 P 标签设置为块元素，但它导致透明 png 为宽的。

在此处输入图像描述

HTML:
<div id="hero">
        <div class="container">
            <div class="row">
                <div class="span12" id="hero-text">
                    <h2>Heading line</h2>
                    <p>Paragraph line goes here</p>                            
                </div>
            </div>
        </div>
</div>

CSS

#hero {
height: 435px;
width: 100%;
background: url(../img/hero-image.png) 0 0 no-repeat;
background-color: #999;
position: relative;
color: #FFF;
border-bottom: 3px solid #E6E6E6;
}


#hero-text {
position: absolute;
top: 33%;
text-align: center;
}

#hero h2 {
font-size: 4em;
font-style: normal;
line-height: 50px;
padding-top: 10px;
background: url(../img/bg-heading.png) repeat;
display: inline-block;
padding: 10px 20px;
}

#hero p {
font-size: 2em;
line-height: 30px;
display: block;
background: url(../img/bg-heading.png) repeat;
padding: 10px 20px;
}

任何帮助表示赞赏。

4

2 回答 2

0

我看到你想办法让它们像你的截图一样堆叠起来。

现在，

尝试width: auto;在#hero p你的 CSS 中添加。

于 2013-07-25T17:48:05.140 回答
0

这实际上比我最初想象的更难解决。我可以为你找到两个选择。如果您不想更改标记：

  1. 同时给#hero h2 和#hero p display:inline-block，并给它们宽度，使它们的组合宽度大于100%。它们都可以是 width:51%，或者一个可以比另一个宽，只要它们的总和大于父级的宽度即可。这将导致 p 换行。请参阅http://codepen.io/anon/pen/cjDiH或

2.如果您希望它们的宽度是流动的，我会在 h2 和 p 之间添加一个元素，即 display:block。我添加了 hr，然后去掉了它的边距、填充和边框，使其不可见，除了导致换行。见http://codepen.io/anon/pen/AGDti

于 2013-07-25T19:42:07.163 回答