gpt4 book ai didi

html - 你如何解释这个 div 间距问题?

转载 作者:太空宇宙 更新时间:2023-11-03 21:48:06 24 4
gpt4 key购买 nike

这个间距问题让我抓狂。我终于发现,为了在表单元素之间留出空格,我需要按如下所示格式化我的 HTML 代码。

有人能解释一下这是怎么回事吗?这是一些换行问题吗?

注意事项:

  • 我使用的是 Bootstrap 3 CSS 文件,没有其他样式
  • 下面两个示例之间的唯一区别在于 .form-group div 的布局方式

<强>1。带空格的表单元素:

enter image description here

<!DOCTYPE html>
<html>
<head>
<title>Elements with spaces</title>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<form class="form-inline" role="form">
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter email">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password">
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form>
</body>
</html>

<强>2。没有空格的表单元素:

enter image description here

<!DOCTYPE html>
<html>
<head>
<title>Elements with spaces</title>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<form class="form-inline" role="form">
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter email">
</div><div class="form-group">
<input type="password" class="form-control" placeholder="Password">
</div><button type="submit" class="btn btn-default">Sign in</button>
</form>
</body>
</html>

最佳答案

内联元素对代码中的空格敏感。由于您的示例中有 div,它们通常是 block 级元素,但它们并排出现,因此您的 CSS 很可能将它们更改为内联显示。您还可以使用 HTML 注释来消除间隙。

<div class="form-group">
<input type="email" class="form-control" placeholder="Enter email">
</div><!--
--><div class="form-group">
<input type="password" class="form-control" placeholder="Password">
</div>

关于html - 你如何解释这个 div 间距问题?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19304673/

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