gpt4 book ai didi

html - 表单元素中的空格

转载 作者:可可西里 更新时间:2023-11-01 14:51:41 30 4
gpt4 key购买 nike

我试图摆脱期间日期和 guets 字段之间的空间,尝试了所有带有边框、填充的方法,还尝试了 float 字段但没有用。

这是代码

<html>
<head>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<form id="frmContact" action="/confirmacao.html" method="post">
<fieldset>
<legend>Consulta:</legend>
<p>
<label class="field" for="usr">Nome:&nbsp;</label>
<input id="usr" type="text" name="nome" title="Digite seu nome" class="textbox"/>
</p>


<p>
<label class="field" for="usr">Period:&nbsp;</label>
<input type="text" id="dataEntrada" name="dataEntrada" class="textbox-date"/>
a:
<input type="text" id="dataSaida" name="dataSaida" class="textbox-date"/>
</p>


<p>
<label class="field" for="hospedes">Guests:&nbsp;</label>
<select class="textbox-option" id="hospedes" name="hospedes">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</p>

<p>
<label class="field" for="usr">E-mail:&nbsp;</label>
<input id="email" class="textbox" name="email" title="Seu e-mail para que possamos entrar em contato"/>
</p>
<p>
<label class="field" for="usr">Detalhes:&nbsp;</label>
<textarea id="mensagem" name="msg" rows="6" cols="30" title="Detalhes adicionais"></textarea>
</p>
<p>
<input type="submit" value=" Enviar "/>
</p>
</fieldset>
</form>
</body>

这是CSS

label.field {
text-align: right;
width: 100px;
float: left;
}

.textbox, .textbox-option{
float: left;
}

.textbox {
width: 250px;
}

.textbox-date{
width: 75px;
}

fieldset p {
clear: both;
padding: 5px;
}

最佳答案

Firefox Web Developer Tools ,我看到 16px 的边距底部:

enter image description here

这是由浏览器的默认样式表添加的:

enter image description here

像这样的场景就是为什么CSS Resets被使用。或者,要解决此特定问题,请在样式表中设置 p 元素的边距。

关于html - 表单元素中的空格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18064222/

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