代码之家 › 专栏 › 技术社区 › Nathan Ridley

在CSS中,在元素后面强制换行比使其成为块元素更好的方法是什么?

css3 css

Nathan Ridley · 技术社区 · 14 年前

我有一个H3标题,我想样式有一个特定的背景颜色,但没有元素的背景占据了父元素的全部宽度。由于H3在默认情况下是块元素,因此我的样式需要将该元素更改为内联块元素,或者只更改为内联元素,如下所示:

h3 {
    background-color: #333;
    color: white;
    display: inline-block;
}

这可以很好地工作,但前提是它后面紧跟着一个块元素。我不想仅仅为了迎合这种风格而更改标记,所以我想知道是否有一种方法可以使任何相邻的元素(不管它如何显示)从下一行开始?

假设我可以使用CSS3。

6 回复 | 直到 14 年前

PeterWong 14 年前

试试这个:

h3:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

fredley 14 年前

display:block;
width:auto;

这将使宽度尽可能小(不填充整个父元素),并使其他元素显示在下面。

Stephan Muller 14 年前

元素在 <h3> <p> , <ul> 或者其他块元素,尽管这完全取决于您的html。这是可预测的吗?它是一个选项,只是把每个元素,直接遵循一个 <h3>

h3 ~ * { display: block }

我知道的另一种让块元素不占用所有空间的方法是浮动它,但这留下了另一个问题。

David Rutherford 9 年前

我经常在代码中遇到这种情况,通常是针对内联块的div。我见过的最好的方法是强制换行,就是将代码包装到一个额外的div中。原始的html得到了预期的格式,div包装器强制换行。

假设这是你的h3风格,

h3 {
  display: inline-block;
}

那就把它包起来。

<div>
   <h3>My heading</h3>
</div>

user1010892 12 年前

h3:after {
  content: "\A ";
  line-height: 0;
  white-space: pre;
  display:inline-block;
}

我好像记得IE7有个问题。

Rotareti 11 年前

如果您不需要将h3居中,这可能会有帮助:

h3 {
  background-color: #333;
  color: white;
  display: inline-block;
  float: left;
  clear: left;
}