html - css 表单输入与标签并排

Question

又来了!我正在构建一个表单，我想并排放置一些输入元素以节省空间，但我在将标签和输入框放在正确位置时遇到了一些问题。

这是目前的 html:

<form id="clientForm" method="post" action="formProcess.php" >
    <fieldset >
        <div id="errorDiv"></div>
        <label for="name">*Nome: </label>
        <input type="text" id="name" name="name" placeholder="Nome do cliente" />
        <span class="errorFeedback errorSpan" id="nameError">Nome é obrigatório.</span>
        <br />
        <label for="phone1">*Telefone 1: </label>
        <input type="text" id="phone1" name="phone1" />
        <span class="errorFeedback errorSpan" id="phone1Error">Pelo menos um numero de contato é necessario.</span>
        <br />
        <label for="phone2">Telefone 2: </label>
        <input type="text" id="phone2" name="phone2" />
        <br />
        <label for="name">E-mail: </label>
        <input type="text" id="email" name="email" placeholder="E-mail" />
        <span class="errorFeedback errorSpan" id="emailError">Formato de e-mail : "user@email.com"</span>
        <br />
        <label for="clientType">Tipo de cliente: </label>
        <input class"radioButton" type="radio" name="clientType" id="jur" value="jur" checked="checked"/>
        <label class="radioButton" for="clientType">Jurídico</label>
        <input class"radioButton" type="radio" name="clientType" id="fis" value="fis" />
        <label class="radioButton" for="clientType">Físico</label>
        <label for="doc" id="docLabel">CNPJ: </label>
        <input type="text" id="doc" name="doc" />
        <hr />
        <p>
            Endereço
        </p>
        <label for="cep">CEP: </label>
        <input type="text" name="cep" id="cep" onblur="consultacep(this.value)"/>
        <br />
        <label for="street">Logradouro: </label>
        <input type="text" id="street" name="street" placeholder="Logradouro"/>
        <label for="number">Número: </label>
        <input type="text" id="number" name="number" placeholder="123"/>
        <label for="addAddress">Complemento: </label>
        <input type="text" id="addAddress" name="addAddress" placeholder="Complemento"/>
        <br />
        <label for="city">Cidade: </label>
        <input type="text" name="city" id="city" />
        <label for="state">UF: </label>
        <select name="state" id="state">
            <?php
                foreach ($estados as $value => $name) {

                    echo '<option value="' . $value . '">' . $name . '</option>';
                }
            ?>
        </select>

        <label for="payDate">Data preferida de pagamento: </label>
        <input type="date" name="payDate" id="payDate" />
    </fieldset>
</form>

和CSS:

fieldset {
    border: 5px solid #5E8A8A;
    font-family: Arial, Helvetica, sans-serif;
    color: #002447;
    font-size: 1.2em;
    margin-top: 3%;
    margin-bottom: 5%;
    padding: 0.2em;
    background-color: #5E8A8A;
    display: inline-block;
}


fieldset label{
    width: 8em;
    margin-right: 1em;
    float: left;
    text-align: right;
    display: inline-block;
}
fieldset input {
    width: 20em;

}

.radioButton {
    width: 1.5em;
    margin-right: 0.2em;
    margin-left: 0.2em;
    float: none;
    text-align:center;

}



.errorClass {
    background-color: #CC6666;
}

#errorDiv {
    color: red;
}

.errorFeedback {

}

#phone1, #phone2{
    width: 10em;
}

.sideLabel{
    width: 8em;
    margin-right: 0.2em;
    float: left;
    text-align: right;
    display: inline-block;
}

到wixh我得到了结果:

有什么想法吗？(css 新手，很抱歉回答这个基本问题)

Answer 1

不要使用 <br>换行，使用 <p>甚至

<ul>
  <li></li>
</ul>

此外，<fieldset>用于定义表单的部分，因此看起来您应该在“Endereço”之前开始一个新的字段集，而不是使用 <p>