Align Divs Correctly

Navigation
1

Hello, I have the following CSS 

.control-label{
    width: 100px;   
    text-align: center;
}
.input-mini {
    width: 85px;    
}

And the following form structure 

<div class="control-group">
    <div class="controls" style="float:left; margin-left: 5px;">
        <div id="textinput" class="control-label" style="float:left; margin-left: 5px;">Base</div>
        <div id="textinput" class="control-label" style="float:left; margin-left: 5px;">P. Moto</div>
        <div id="textinput" class="control-label" style="float:left; margin-left: 5px;">P. Carro</div>
        <div id="textinput" class="control-label" style="float:left; margin-left: 5px;">P. Van</div>
        <div id="textinput" class="control-label" style="float:left; margin-left: 5px;">P. Caminhão</div>
        <div id="textinput" class="control-label" style="float:left; margin-left: 5px;">R. Moto</div>
        <div id="textinput" class="control-label" style="float:left; margin-left: 5px;">R. Carro</div>
        <div id="textinput" class="control-label" style="float:left; margin-left: 5px;">R. Van</div>
        <div id="textinput" class="control-label" style="float:left; margin-left: 5px;">R. Caminhão</div>
    </div>
</div>


<div class="control-group">

    <div class="controls" style="float:left; margin-left: 5px;">
        <div class="input-mini" style="float:left; margin-left: 5px;">
            <strong>BAIRRO</strong>
        </div>
        <input id="textinput" name="textinput" type="text" placeholder="0.00" class="input-mini" style="float:left; margin-left: 5px;">
        <input id="textinput" name="textinput" type="text" placeholder="0.00" class="input-mini" style="float:left; margin-left: 5px;">
        <input id="textinput" name="textinput" type="text" placeholder="0.00" class="input-mini" style="float:left; margin-left: 5px;">
        <input id="textinput" name="textinput" type="text" placeholder="0.00" class="input-mini" style="float:left; margin-left: 5px;">
        <input id="textinput" name="textinput" type="text" placeholder="0.00" class="input-mini" style="float:left; margin-left: 5px;">
        <input id="textinput" name="textinput" type="text" placeholder="0.00" class="input-mini" style="float:left; margin-left: 5px;">
        <input id="textinput" name="textinput" type="text" placeholder="0.00" class="input-mini" style="float:left; margin-left: 5px;">
        <input id="textinput" name="textinput" type="text" placeholder="0.00" class="input-mini" style="float:left; margin-left: 5px;">
        <input id="textinput" name="textinput" type="text" placeholder="0.00" class="input-mini" style="float:left; margin-left: 5px;">
    </div>
</div>

But at the time of viewing, the titles are misaligned ... This way:

Addendum

Remembering that I will make a foreach () in the second div, to repeat the fields according to the neighborhoods ...

    
asked by anonymous 07.08.2015 / 21:10

1 answer

0

Hand, I gave a CTRL C CTRL V in the fields. But you will understand the schemas:

HTML 

<div class="control-group">

<div class="controls" style="float:left; margin-left: 5px;">
    <div class="input-mini" style=" margin-left: 5px;">
        <strong>BAIRRO</strong>
    </div>
    <div class="form-group">
        <label>Bairro</label>
        <input id="textinput" name="textinput" type="text" placeholder="0.00" class="input-mini">
    </div>
    <div class="form-group">
        <label>Bairro</label>
        <input id="textinput" name="textinput" type="text" placeholder="0.00" class="input-mini">
    </div>
    <div class="form-group">
        <label>Bairro</label>
        <input id="textinput" name="textinput" type="text" placeholder="0.00" class="input-mini">
    </div>
    <div class="form-group">
        <label>Bairro</label>
        <input id="textinput" name="textinput" type="text" placeholder="0.00" class="input-mini">
    </div>
    <div class="form-group">
        <label>Bairro</label>
        <input id="textinput" name="textinput" type="text" placeholder="0.00" class="input-mini">
    </div>
</div>

CSS 

.input-mini {
    width: 85px;
    display:inline-block;
}

label {
    width: 100px;   
}
div.form-group{
    width: 100px;
    display:inline-block;
    vertical-align: middle;
}

The labels are inside the FORM. I created a form-group class and put the fields inside and corresponding labels.

In CSS you set display:inline-block and strip float:left from HTML.

    
07.08.2015 / 21:28
Eclipse Error # {component.valid} "valid can not be resolved as a member of component" Modal with register loaded from the database for editing using PDO [closed]