Question

我只是希望我的所有p元素都是其中文本的长度。如果我将.intro p放在inline-block，它可以工作，但我希望我的p元素全部显示在彼此之下。有没有办法做到这一点？

HTML：

<div class="intro">
    <p>fjsdqk  dhksjfd kjsh kdshjkd</p>
    <p>hsdqjkf kjdsh</p>
    <p>hdsqkhfj sdhkjf fsjqkfhdks  hjs</p>
</div>

CSS：

.intro {
    margin-top: 80px;
    color: #ffffff;
    text-align: center;
}

.intro p {
    margin-bottom: 12px;
    padding: 6px 12px;
    background: #25d6a2;
}

Answer 1

只需在每个br元素

之后添加p标记即可

<div class="intro">
    <p>fjsdqk  dhksjfd kjsh kdshjkd</p><br>
    <p>hsdqjkf kjdsh</p><br>
    <p>hdsqkhfj sdhkjf fsjqkfhdks  hjs</p><br>
</div>

Demo

如果您不想在DOM中添加<br />或由于某种原因无法修改HTML，则可以使用CSS :after伪来模拟换行符content值为\a且white-space设置为pre

的属性

就\a的解释而言，它是换行符的十六进制值，相当于10。

p:after {
    content:"\a";
    white-space: pre;
}

Demo

Answer 2

从某种意义上说，你想要吃掉你的蛋糕并保留它：在考虑盒子格式的情况下，将p元素作为内联元素（在这种情况下，仅为了在文本后面设置背景）但是从一条新线开始意义上的块元素。

有各种各样的方法和技巧，但也许最简单的方法是使用浮动（而不是display: inline-block）：将元素浮动到左边但也清除浮动，这样就不会发生真正的浮动 - 你只需要想要浮动的副作用，使元素与其内容一样宽的效果：

.intro p {
    float: left;
    clear: both;
}

此外，您需要在介绍后的元素上设置clear: both。

p元素的长度与文本相同吗？

2 个答案: