到目前为止，在我的html文件中，我有一个canvas和一个div标签。div标签包含四个段落标签，我试图将它们设置在屏幕的顶部、中间和内联。当我将它们设置为内联并试图添加一些填充时，问题出现了。第三段突然下降到第一段下面。现在是css和html。第一个我试着去掉所有的边距和填充，所以我做到了边距：0;填充：0;
ukqbszuj1#
我想你想设置中间所有段落，你可以尝试像下面，请评论更清晰。第一个
5uzkadbs2#
在CSS中添加/修改以下行：
canvas { display: flex; justify-content: center;
且div必须为div { position: relative; [...] }
div { position: relative; [...] }
jslywgbw3#
如果我没理解错你的问题，你需要display:inline-block;而不是display:inline;。同时添加一个margin:0;到<p>标记。此外，如果要在一行中显示<p>标记，请将width:100%;添加到.div。大概是这样的：第一个
display:inline-block;
display:inline;
margin:0;
<p>
width:100%;
.div
erhoui1w4#
这可能就是你想要的。我所做的就是为你的画布和你的Events div做一个容器div。然后我把这两个项目在容器中居中对齐，并调整events的顶部位置。看看我在这里做了什么：第一个编辑：我也不确定这个项目的性质，但也许用div代替p会使这个项目更顺利。第一次
Events
events
div
p
1aaf6o9v5#
这是因为div没有占用完整的空间，所以现在它占用了。如果添加填充，段落仍将向下移动，因为您知道它们是内联元素而不是Flex第一个
pgccezyw6#
你可以设置<p>标签display: inline-block;和设置这四个段落的容器width: 100vw;。第一个
display: inline-block;
width: 100vw;
6条答案
按热度按时间ukqbszuj1#
我想你想设置中间所有段落，你可以尝试像下面，请评论更清晰。
第一个
5uzkadbs2#
在CSS中添加/修改以下行：
且div必须为
div { position: relative; [...] }jslywgbw3#
如果我没理解错你的问题，你需要
display:inline-block;而不是display:inline;。同时添加一个
margin:0;到<p>标记。此外，如果要在一行中显示
<p>标记，请将width:100%;添加到.div。大概是这样的：
第一个
erhoui1w4#
这可能就是你想要的。我所做的就是为你的画布和你的
Eventsdiv做一个容器div。然后我把这两个项目在容器中居中对齐，并调整events的顶部位置。看看我在这里做了什么：
第一个
编辑：我也不确定这个项目的性质，但也许用
div代替p会使这个项目更顺利。第一次
1aaf6o9v5#
这是因为div没有占用完整的空间，所以现在它占用了。
如果添加填充，段落仍将向下移动，因为您知道它们是内联元素而不是Flex
第一个
pgccezyw6#
你可以设置
<p>标签display: inline-block;和设置这四个段落的容器width: 100vw;。第一个