Question

这是html：

＆＃13;

p {}

div {
  display: inline;
}

＆＃13;

<html>

<head>
  <title>Page Title</title>


</head>

<body>
  <p>This is a some text</p>
  <div>extra text</div>
</body>

</html>

＆＃13;

为p { float: left;}，然后显示：

你可以看到这两个文本的高度不同（或者没有对齐），所以当一个元素向左浮动时，另一个元素如何在它周围浮动？通过使两者的顶部边距在同一高度？如何让它们显示相同的高度：

Answer 1

第一种情况：

p {

}
div {
   display: inline;
}

这里div是内联对齐的，但是p仍然是一个块元素，这就是为什么p和div不在同一行中的原因如果你让p显示为内联它们都将内联对齐。

第二种情况：

p {
   float: left;
}
div {
   display: inline;
}

在这里它们有点内联，但它们的高度不一样。原因是浏览器在p元素的顶部和底部添加了一些余量，这就是为什么p的上边距向下移动的原因。删除它的上边距，它们将被内联。

Answer 2

而不是给出边距和设置高度。只需将 p 标记替换为 span 标记即可。由于 p 标记是块元素， span 是内联元素。代码将如下：

<span>This is a some text</span>
<div>extra text</div>

CSS： -

 div {
   display: inline;
 }

Answer 3

您需要为所有兄弟姐妹添加display: inline-block;属性......！像这样......

p {
  display: inline-block;
  vertical-align: middle; 
}
div {
   display: inline-block;
   vertical-align: middle;
}

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p>This is a some text</p>
<div>extra text</div>
</body>
</html>

因为您使用以下代码：

p {

}
div {
    display: inline;
}

因此，只要div具有属性，display: inline-block;就有p属性：display: block;所以它们没有正确对齐..！

如果您使用display: inline-block;属性，那么您也可以使用vertical-align: value;垂直对齐元素......！

使其成为内联的另一种方法是使用float ....

p {float: left; margin: 0px;}
div {float: left;}

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p>This is a some text</p>&nbsp;
<div>extra text</div>
</body>
</html>

正如你提出的问题.......

另一个问题是，如果我将p向左浮动为p { float: left;}，那么这就是显示：

原因是p标记中的默认边距不在div ....！因此，您需要移除p标记的边距以使其适合...！

或者您可以看到Default style sheet for HTML 4

Answer 4

根据您的代码尝试这个

还将<p>标记样式设置为display:inline，以便输出

＆＃13;

p {
  display: inline;
}

div {
  display: inline;
}

＆＃13;

<html>
<head>
  <title>Page Title</title>
</head>
<body>
  <p>This is a some text</p>
  <div>extra text</div>
</body>
</html>

＆＃13;

html中的内联元素和浮点元素

4 个答案: