gpt4 book ai didi

html - 使用内联 block 并向节点添加填充的正确输出是什么?

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

我有以下代码,我试图理解为什么所有元素都没有布置在同一行上。这是因为我添加了填充,但是在布局元素时不应该考虑填充吗?我检查了 IE、Firefox 和 Chrome。它们都将最后一个元素布置在下一行。

谁能解释原因,以及如何将所有元素放在同一行上并保留我放在它们上面的填充?

谢谢

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.body{PADDING:0PX;MARGIN:0PX}
.bar{WIDTH:100%;HEIGHT:20PX;BACKGROUND-COLOR:#FFFFFF;}
.item{WIDTH:25%;HEIGHT:20PX;DISPLAY:INLINE-BLOCK;COLOR:#000000;PADDING:5PX;}
</style>
</head>

<body class="body">
<div id="menubar" class="bar">
<div class="item">B1</div>
<div class="item">B2</div>

<div class="item">B3</div>
<div class="item">B4</div>
</div>
</body>
</html>

B4换行显示

我想要的输出是:

B1 B2 B3 B4

我得到的输出是:

B1 B2 B3
B4

最佳答案

您将四个元素中的每一个都设置为 25% 宽度 + 10 像素的水平填充。这意味着将有 40 像素的宽度使第四个元素换行。

如果要在应用宽度的同一元素上使用内边距,则需要使用百分比,例如 width: 23%;填充:5px 1%;。或者,您可以将内边距应用到内部元素,这样您的元素的唯一尺寸就是宽度。

关于html - 使用内联 block 并向节点添加填充的正确输出是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8886556/

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