html如何定义包装块,html – 如何强制内联块元素正确包装它的多行子元素？

I need to display left and right borders padded 10px away from left

and right edges

你需要给边距不填充.

when text takes up multiple lines the wrapping inline-block element

stretches to 100% of it’s container width

这是因为内容很长并且div将尽可能地延伸(达到父宽度)以在内容包装到下一行之前容纳内容.

你的div是内联块还有另外一个问题 – 如果内容少了,那么下一个div将在第一个div之后开始,而不是在它自己的行上.

解决方案(将div保持为内联块)：

使用伪元素来破坏该行.

* { box-sizing: border-box; }

.container {

width: 200px;

text-align: center;

background-color: #ddd;

}

.borders-wrapper {

display: inline-block;

border-left: 2px solid black;

border-right: 2px solid black;

padding: 0px 10px; margin: 10px;

}

.borders-wrapper::after {

content:"\A"; white-space:pre;

}

The title

The title that

The title that takes up multiple lines

注意：

谢谢@Kaiido指出来.伪元素技巧不适用于其元素为内联块.为了使它工作,你在跨度上做填充/边距,并浮动div.然后使用变换技巧使其居中.有点复杂.

例：

* { box-sizing: border-box; }

.container {

width: 200px;

text-align: center;

background-color: #ddd;

}

.borders-wrapper {

float: left; clear: left;

position: relative; left: 50%;

transform: translateX(-50%);

margin: 0px auto;

}

.borders-wrapper > span {

display: inline-block;

padding: 0px 10px; margin: 10px;

border-left: 2px solid black;

border-right: 2px solid black;

}

.container:after { content:''; display:block; clear: both; }

.div2 { width: 400px; }

The title

The title that

The title that takes up multiple lines

The title

The title that

The really long title that takes up multiple lines in a large width