关闭段落创建不需要的换行符答案

【问题标题】：Closing paragraphs creating unwanted line breaks关闭段落创建不需要的换行符
【发布时间】：2013-05-07 08:13:06
【问题描述】：

我正在尝试使所有圆圈在页面上对齐，但它们是垂直堆叠的。有什么方法可以删除换行符，或者任何其他允许与我的段落中的 CSS 具有相同 CSS 属性的工具？实现一个 div 会更容易吗？

<div>
    <p id="developer">
    <br>
    <br>
    <br>
    <br>
    HTML
    <br>
    CSS
    <br>
    JavaScript & jQuery
    </p>

    <p id="designer">
            <br>
    <br>
    <br>
    <br>
        Photoshop
        <br>
            Illustrator
            <br>
                Responsive Design
    </p>

    <p id="uxdesigner">
        <br>
    <br>
    <br>
    <br>
        Flowcharts
        <br>
            Wireframes
            <br>
                Personas
    </p>
</div>

#developer {
    background-color: #0071BC;
    width: 300px;
    height: 300px;
    border-radius: 300px;
    text-align: center;

}
#designer {
    background-color: #0071BC;
    width: 300px;
    height: 300px;
    border-radius: 300px;
    text-align: center; 
}
#uxdesigner {
    background-color: #0071BC;
    width: 300px;
    height: 300px;
    border-radius: 300px;
    text-align: center; 
}

【问题讨论】：

你想让p块从左到右堆叠吗？如果是这样，您需要使用 display: inline 或 display: inline-block 更改它们。
@BrianDHall display:inline 不起作用，它会将整个对象及其所有子对象折叠成内联的混乱。
是的，我想将 p 块从左到右堆叠。我将其更改为您的建议，现在可以使用。谢谢。

标签： css html paragraph

【解决方案1】：

添加：

p {
    display:inline-block;
}

作为旁注，请在您的 CSS 文件中保留布局，并且不要使用 HTML 元素。专门使用 <br> 创建间距是一个坏主意，也是语义灾难。

【讨论】：

【解决方案2】：

在这种情况下，您可以通过使用 display: table 获得额外价值。这是您的代码更简洁的版本：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">

.skills {display: table;}
.skills p {
    display: table-cell; 
    vertical-align: middle; 
    background-color: #0071BC;
    width: 300px;
    height: 300px;
    border-radius: 300px;
    text-align: center;
    margin: 0;
}
.skills span {display: block;}

</style>

</head>
<body>

<div class="skills">
    <p>
        <span>HTML</span>
        <span>CSS</span>
        <span>JavaScript & jQuery</span>
    </p>

    <p>
        <span>Photoshop</span>
        <span>Illustrator</span>
        <span>Responsive Design</span>
    </p>

    <p>
        <span>Flowcharts</span>
        <span>Wireframes</span>
        <span>Personas</span>
    </p>
</div>

</body>
</html>

【讨论】：