gpt4 book ai didi

css - float 旁边的内联元素

转载 作者:行者123 更新时间:2023-11-28 17:53:04 25 4
gpt4 key购买 nike

我一直在试图弄清楚内联元素和 float 元素在彼此相邻时的行为方式。我有以下代码,其中内联元素出现在 float 元素之前,第二种情况是内联元素出现在 float 元素之后,在这两种情况下。

两个示例中的 html 代码相同,所以我将其放在此处:

<body>
<p class="first">first paragraph</p>
<p class="second">second pargraph</p>
<p class="clearBoth"></p>
</body>

所以这是第一个示例,其中是 float 元素之前的内联元素,以及以下 css:

html{
background:white;
}
p.clearBoth{
clear:both;
}
body{
width:400px;
margin:0 auto;
background:red;
}
p.first{
display:inline;
background:yellow;
color:black;
}
p.second{
float:left;
background:black;
color:white;
}

and here is the link what this code does

这是第二个示例,其中 float 元素是第一个元素,以及以下 css 代码:

html{
background:white;
}
p.clearBoth{
clear:both;
}
body{
width:400px;
margin:0 auto;
background:red;
}
p.first{
float:left;
background:yellow;
color:black;
}
p.second{
display:inline;
background:black;
color:white;
}

And here is link what it does

在这两种情况下,我都注意到无论 html 文档中第一个元素是哪个, float 元素都会第一个到左边,但我发现这种对齐非常奇怪,因为我通常希望两者在同一行。

最佳答案

那是因为网络浏览器应用了 margin属性到 <p> 的顶部和底部元素。

例如,谷歌浏览器应用以下内容:

-webkit-margin-before: 1em;
-webkit-margin-after: 1em;

您需要使用 CSS Reset 重置默认用户代理样式表

作为一个小修复,仅用于演示:

* { margin: 0; padding: 0; }
/* Or just:
p { margin: 0; }
*/

UPDATED DEMO #1

UPDATED DEMO #2

关于css - float 旁边的内联元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21889197/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com