Question

我需要显示从居中文字的左右边缘填充10px的左右边框。当所有文本都适合一行时没有问题，但是当文本占用多行时，包装内联块元素会延伸到其容器宽度的100％。

我需要一个纯CSS解决方案。

这是JSFiddle与问题的工作演示：https://jsfiddle.net/k8wrbctr/

这是HTML：

<div class="container">
<div class="borders-wrapper"><span>The title</span></div>
<div class="borders-wrapper"><span>The title that takes up multiple lines</span></div>
</div>

这是CSS：

.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-left: 10px;
    padding-right: 10px;
    margin-bottom: 20px;
}

结果如下：

            | The title |

|      The title that takes up      |
|           multiple lines          |

这就是我想要实现的目标：

            | The title |

     | The title that takes up |
     |      multiple lines     |

Answer 1

我需要显示从左边10px填充的左右边框和右边缘

您需要margin而不是padding。

当文本占用多行时包装内联块元素延伸至其容器宽度的100％

这是因为内容很长，div会尽可能地延伸（达到父宽度），以便在包装到下一行之前容纳内容。

div inline-block存在另一个问题 - 如果内容少于下一个div，则会在第一个div之后开始，而不是在自己的行上。

解决方案（将inline-block保持为* { 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; } ）：

使用伪元素来破坏该行。

＆＃13;

<div class="container">
    <div class="borders-wrapper"><span>The title</span></div>
    <div class="borders-wrapper"><span>The title that</span></div>
    <div class="borders-wrapper"><span>The title that takes up multiple lines</span></div>
</div>

＆＃13;

inline-block

＆＃13;

<强> 注意：

感谢@Kaiido指出来。伪元素技巧不会使用其元素为div。为了使它工作，你在跨度上做填充/边距，然后浮动transform。然后使用* { 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; }技巧将其置于中心位置。有点复杂。

示例：

＆＃13;
＆＃13;
<div class="container"> <div class="borders-wrapper"><span>The title</span></div> <div class="borders-wrapper"><span>The title that</span></div> <div class="borders-wrapper"><span>The title that takes up multiple lines</span></div> </div> <br /> <div class="container div2"> <div class="borders-wrapper"><span>The title</span></div> <div class="borders-wrapper"><span>The title that</span></div> <div class="borders-wrapper"><span>The really long title that takes up multiple lines in a large width</span></div> </div>
＆＃13;
Field1: 10; Field2: 15;
＆＃13;
＆＃13;
＆＃13;

如何强制内联块元素正确包装它的多行子元素？

1 个答案: