结束段落产生不必要的换行符

我想让所有的圆圈在页面上对齐，但它们是垂直堆叠的。是否有任何方法可以删除换行符，或任何其他工具，将允许相同的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-block;
}

作为旁注，请在CSS文件中保持布局，不要使用HTML元素。特别是用<br>创建空格是一个坏主意，也是一个语义灾难。

在这种情况下，使用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>

相关内容

最新更新

热门标签：