3

I'm trying to get rid of the space between the period dates and the guets field, tried everything with border, padding, also tried floating the fields but didn't work.

here is the code

<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>

and this is the 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;
}
4

2 回答 2

1

在Firefox Web Developer Tools中，我看到 16px 的边距底部：

在此处输入图像描述

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

在此处输入图像描述

像这样的场景就是使用CSS 重置的原因。或者，要解决此特定问题，请p在样式表中设置元素的边距。

于 2013-08-05T18:32:51.407 回答
0

我猜是因为当段落中有一些文本然后它找到新段落时，它们之间会有空格。无论如何，我找到了一种解决方案，不是最好的解决方案是通过将段落中的文本删除到文本标签来修改下面的代码。

CSS - 为标签添加新类，将浮动添加到 .textbox-date

<style type="text/css">
label.field {
    text-align: right;
    width: 100px;
    float: left;
}

label.newfield 
    float: left;
}

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

.textbox {
    width: 250px;
}

.textbox-date{
    width: 75px;
    float: left;
}

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

}
</style>

html - 添加新标签

<label class="newfield" for="dataSaida">&nbsp;a:&nbsp;</label>

为了

<input type="text" id="dataSaida" name="dataSaida" class="textbox-date"/>

像这样

<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="dataEntrada">Period:&nbsp;</label>
        <input type="text" id="dataEntrada" name="dataEntrada" class="textbox-date"/>
        <label class="newfield" for="dataSaida">&nbsp;a:&nbsp;</label>
        <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>
于 2013-08-05T20:58:28.913 回答