html - 无法在适当的位置获取内容

Question

我在制作一个小的 html 和 css 元素时遇到了问题。

这是我的 html:

<div class="wrapper">
    <div class="topText">Met vriendelijke groet,</div>
    <div class="topLine"></div>
    <div class="content">
        <div class="left-content">
            <strong>name lastname</strong> <br>
            <p class="name">T</p><p class="address">+31(0)000 000000</p>
            <p class="name">M</p><p class="address">+31(0)0 00000000</p>
            <p class="name">E</p><p class="address">test@test.com</p>
        </div>
        <div class="right-content">
            <strong>name lastname</strong> <br>
            <p class="name">T</p><p class="address">+31(0)000 000000</p>
            <p class="name">M</p><p class="address">+31(0)0 00000000</p>
            <p class="name">E</p><p class="address">test@test.com</p>
        </div>

    </div>
    <div class="bottomBar"></div>
</div>

这是我的CSS:

.wrapper {
    width:100%;
    font-family: Calibri, Candara, Segoe, 'Segoe UI', Optima, Arial, sans-serif;
}
.topText {
    font-size: 11pt;
    margin-bottom: 5px;
}
.topLine {
    height:1pt;
    width:100%;
    background-color: #C80032;
    margin-bottom: 5px;
}
.content {
    height:100px;
    width: 100%;
    margin-bottom: 5px;
}

.left-content{
    float:left;
    margin-right: 25px;
}

.right-content{

}

.name{
   margin: 0px !important;

}

.address{
    margin: 0px 0px 0px 30px;
}

.bottomBar {
    float: right;
    width:90%;
    height: 20px;
    background-color:#7F7B7B;
}

好吧，我有 2 个名为左右内容的 div，在该内容中我有

属性。

我希望 html/css 的输出看起来像这样:

姓名姓氏
电话 +31(0)000 000000
男 +31(0)0 00000000
E test@test.nl

我试过玩边距和那种东西，但我无法弄清楚为什么它没有正确到位。并且很难在此处的编辑器中显示。

Answer 1

标签<p>默认情况下有一个 display: block;属性(它使元素与容器一样宽，不限制内容结束的位置)。你应该使用 <span>相反(因为它有 display: inline; )或者只是把 display: inline属性(property)给你<p>标签。

Future reference