3

期間の日付とゲッツフィールドの間のスペースを取り除こうとしています。ボーダー、パディングですべてを試し、フィールドをフローティングしようとしましたが、うまくいきませんでした。

ここにコードがあります

<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;
}
4

2 に答える 2

0

段落にテキストが含まれていて、新しい段落が見つかった場合、それらの間にスペースができるためだと思います。とにかく、段落内のテキストをテキストのラベルに削除して、以下のコードを変更するのが最善の解決策ではないという解決策を見つけました。

CSS - ラベルに新しいクラスを追加し、float left を .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 に答える