Question

我正在尝试在p容器中显示3个内联div标记，但是当我更改一个font-size标记的p时，我会遇到问题。我是否需要调整line-height p标签或是否有通用命令？

此外，除了使用margin-left或margin-right在p代码之间添加空格外，还有其他办法吗？

.container{
width:200px;
padding:10px;
display:inline;
}

.one{
float:left;
font-size:25px;
}

.two{
float:left;
}

.three{
float:left;
}


<div class="container">
 <p class="one">
  sentence one
 </p>
 <p class="two">
  sentence two
 </p>
 <p class="three">
  sentence three
 </p>
</div>

Answer 1

不要使用float来设置内联元素。使用display:inline;

.one{
  font-size:25px;
}
.container p {
  display:inline;
}

工作DEMO。

但是我建议您避免使用内嵌元素p，而是使用span代替内置元素。

HTML <span>元素是用于表达内容的通用内联容器

Workind DEMO。

Answer 2

如果您想使用display:inline-block代码

，可以使用p

这是JSFiddle

但是 paolo.basso99 表示要显示inline元素，您应该使用span标记。

希望这会有所帮助。

Answer 3

可以使用 CSS Flexbox 来实现此方案。要使它们等间距和垂直居中，您需要应用这些CSS属性。

查看 jsFiddle 的代码。

只需将以下属性添加到案例中的父元素.container

即可

.container {  
  display: flex;
  justify-content: space-between;
  align-items: center;
}

div内的内联p标签

3 个答案: