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的输出看起来像这样：

姓名姓氏
T +31（0）000 000000
M +31（0）0 00000000
E test@test.nl

我试过玩边缘和那种stuf，但我无法弄清楚为什么它没有正确到位。而这很难在编辑器中显示出来。

Answer 1

标记默认具有display: block;属性（使元素与容器一样宽，不限制内容结束的位置）。您应该使用代替（因为它有display: inline;），或者只将display: inline属性添加到代码中。

Future reference

Answer 2

添加＆＃34; float：left＆＃34;到＆＃34; .name＆＃34;类

.name {
  margin: 0px !important;
  float: left;
}

Answer 3

您使用的是p代码（段落），默认情况下会有边距并被视为block元素。要获得两个block元素，您需要使用float 或更好的解决方案，将其行为更改为inline-block。

<强>语义：

如上所述，p标记代表paragraph。你认为它应该包裹在那个标签中吗？我不相信。请考虑使用span inline元素。

Answer 4

与其他答案一样，标签是阻止的。最简单的方法是将名称p标签更改为span，如下所示：

<p class="address"><span class="name">T</span>+31(0)000 000000</p>
<p class="address"><span class="name">M</span>+31(0)000 000000</p>
<p class="address"><span class="name">E</span>test@test.com</p>

将更改为可使范围内联，因此它将位于地址的“下一步”。

无法在适当的地方获取内容

4 个答案: