Align Divs Correctly

Asked

Viewed 181 times

1

Hi, 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 when it comes to visualizing, the headlines get misaligned... that way: inserir a descrição da imagem aqui

Addendum

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

css twitter-bootstrap

  • Puts the bonds inside a <label> Títulos </label>.

  • I put them all inside a label... And I put as float:left.. but everything was together with each other..

  • As much as the width of inputs and Abels are 85, it should fit, but did not give no....

  • Put in a Jsfiddle for us.

  • https://jsfiddle.net/thje3g52/

1 answer

0


Bro, I gave a CTRL C CTRL V on the fields. But you will understand the schemes:

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

As labels stay inside the FORM. I created a class form-group and put the fields inside and the corresponding Abels.

In the CSS you define display:inline-block and takes out the float:left of HTML.

  • Almost that Diego, however, I will have to make a list of neighborhoods in PHP, this means that if they repeated all titles of the fields, for that reason I did separately, so that in the second div I can do the foreach($neighborhoods as $value)

  • No use of tables ?

  • No, in this case no... For the whole form is already in div... in table would be easy even rs

  • But you can do a ìfverificando se é a primeira linha. Você mostra asLabels` only at first.

  • Gambiarra.. rsrsrs

  • Is an alternative @Diegosouza

  • I did it with your alternative, I got it right, I’m grateful

Show 2 more comments

Browser other questions tagged css twitter-bootstrap

You are not signed in. Login or sign up in order to post.