Remove space between span and input

Question

Remove space between span and input

Navigation

#1 by (2 votes)
#2 by (1 votes)

5

I want to know how I can remove these spaces:

Sothatspanandinputgettogether,likehere:

My CSS :

input, textarea { 
background: none repeat scroll 0 0 #FFFFFF; 
border: 1px solid #C9C9C9; 

color: #545658; 
padding: 8px; 
font-size: 14px; 
border-radius: 2px 2px 2px 2px; 

}
 .input-group-addon {
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  color: #555;
  text-align: center;
  background-color: #eee;
  border: 1px solid #EEEEEE;
  }

MY HTML :

<div class="input-group1">
    <span class="input-group-addon" id="basic-addon1">Nome</span>
    <input type="text" name="name" class="input_name" />

    <span class="input-group-addon" id="basic-addon1">Email</span>
    <input type="text" name="email" class="input_email" />
</div>
<div class="input-group1">
    <span class="input-group-addon" id="basic-addon1">Empresa</span>
    <input type="text" name="empresa" class="input_empresa" />
    <select name="state" class="btn" data-width="76" data-value="Funcionários">
        <option value="">Funcionários</option>
        <option value="">------</option>
    </select>
            </div>

    <div class="input-group1">
        <span class="input-group-addon" id="basic-addon1">Cidade</span>
        <input type="text" name="cidade" class="input_cidade" />

    <input type="hidden" name="form_input" value="FORM_COTACAO" />
                <select name="state" class="btn" data-width="76" data-value="UF*">
                    <option value="">UF</option>
                    <option value="AC">AC</option>
                    <option value="AL">AL</option>
                    <option value="AP">AP</option>
                    <option value="AM">AM</option>
                    <option value="BA">BA</option>
                    <option value="CE">CE</option>
                    <option value="DF">DF</option>
                    <option value="ES">ES</option>
                    <option value="GO">GO</option>
                    <option value="MA">MA</option>
                    <option value="MT">MT</option>
                    <option value="MS">MS</option>
                    <option value="MG">MG</option>
                    <option value="PA">PA</option>
                    <option value="PB">PB</option>
                    <option value="PR">PR</option>
                    <option value="PE">PE</option>
                    <option value="PI">PI</option>
                    <option value="RJ">RJ</option>
                    <option value="RN">RN</option>
                    <option value="RS">RS</option>
                    <option value="RO">RO</option>
                    <option value="RR">RR</option>
                    <option value="SC">SC</option>
                    <option value="SP">SP</option>
                    <option value="SE">SE</option>
                    <option value="TO">TO</option>
                </select>   
        <span class="input-group-addon" id="basic-addon1">Telefone</span>
        <input type="text" name="telefone" class="input_telefone" />
        <div class="input-group">

</div>  

</div>

I know I could make the form easily using bootstrap, but I was asked not to use it in this project.

html css

asked by anonymous 11.05.2015 / 19:49

2 answers

1

Putting buoyancy, you solve your problem. See this pen .

Obviously, you need to create one more markup to wrap around the blocks and arrange the elements the way you feel is best. But in this way, the blank space disappears.

12.05.2015 / 07:15

How to change the position of Ticks elements in JqPlot? How to select / deselect a multiple select input at each mouse click? (without Ctrl)

score 2 · Accepted Answer

Instead of:

<span class="input-group-addon" id="basic-addon1">Nome</span>
<input type="text" name="name" class="input_name" />

Place the input tag next to the span tag as follows:

<span class="input-group-addon" id="basic-addon1">Nome</span><input type="text" name="name" class="input_name" />

By doing this, the elements will side-to-side with no spacing. I suggest applying the label tag across the elements to improve accessibility. From the rest of your code, just do the same procedure.