Need to Align HTML + CSS imputs

Asked

Viewed 55 times

-3

I need to line up these imputs 

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
    line-height: 1.6;
}

#btnRefresh {
    background-color: #6a9ce6;
}

.button {
    background: rgb(60, 163, 177);
    padding: 1em 2em;
    color: #fff;
    border: 0;
}

.button:hover {
    background: #333;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
    background-color: #f4f4f4;
    margin: 20% auto;
    padding: 20px;
    width: 40%;
    box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.17);
    animation-name: modalOpen;
    animation-duration: 0.5s;
}

.closeBtn {
    color: #ccc;
    float: right;
    font-size: 30px;
}

.closeBtn:hover,
.closeBtn:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

@keyframes modalOpen {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}
<div id="simpleModal" class="modal">
    <div class="modal-content">
        <span class="closeBtn">&times;</span>
        <h2>Calcule</h2>
        <div class="row">
            <form class="col s12">
                <label for="inputhoras"> Quantas Horas a lâmpada ficara ligada? </label>
                <input type="number" placeholder="horas" id="inputhoras" class="active">
                <p></p>
                <label for="inputkw">Quanto custa o KW/H na sua região?</label>
                <input type="number" placeholder="kw" id="inputkw" class="active">
                <p></p>
                <label for="inputkw">Qual a quantidade lâmpadas você deseja?</label>
                <input type="number" placeholder="Quantidade de Lâmpadas" id="qtdelamp" class="active">
                <p></p>
                <div class="input-field col s12">
                    <label>Tipo de lâmpada</label>
                    <select id="lampadaSel">
                        <option value="" disabled selected>Selecione</option>
                        <option value="1">Lâmpada Bulbo 10W</option>
                        <option value="2">Lâmpada Bulbo 40W</option>
                        <option value="3">Lâmpada Bulbo 60W</option>
                        <option value="4">Lâmpada Corn Led 36W</option>
                        <option value="5">Lâmpada Corn Led 48W</option>
                        <option value="6">Lâmpada Par 30 6W</option>
                        <option value="7">Lâmpada Par 30 10W Dimerizável</option>
                        <option value="8">Lâmpada Par 38 15W</option>
                        <option value="9">Lâmpada Par 38 14W</option>
                        <option value="10">Lâmpada Tubular 9W</option>
                        <option value="11">Lâmpada Tubular 18W</option>
                        <option value="12">Lâmpada Tubular 45W</option>
                    </select>
                </div>
                <h3>Led R$: <span id="lblResultado"></span></h3>
                <h3>Incandescente R$ <span id="lblin"></span></h3>
                <h3> Economia Mensal Incandescente para Led R$ <span id="lblec1"></span></h3>
                <h3>Flourescente R$ <span id="lblflour"></span></h3>
                <h3> Economia Mensal Fluorescente para Led R$ <span id="lblec2"></span></h3>
                <input type="button" id="btnCalcular" class="button" value="Calcular">
            </form>
        </div>
    </div>
</div>

html css

  • Have some problem with your Code, when Runs the snippet nothing appears...

  • how so, aligned to what ? specify better and put a print of your screen to compare

1 answer

0

It wasn’t quite specific the way you’d like to line up, but I believe it’s across the div?

If yes, you can simply use the width:100% in some css class, that way:

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
    line-height: 1.6;
}

.tam-default{
  width:100%; /*pega a largura total da div*/
  padding: 1em 5px; /*mesma altura do botao*/
  max-width:100%;
}

#btnRefresh {
    background-color: #6a9ce6;
}

.button {
    background: rgb(60, 163, 177);
    padding: 1em 2em;
    color: #fff;
    border: 0;
}

.button:hover {
    background: #333;
}

.modal {
    /*display:none; comentei para poder ver a modal*/
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
    background-color: #f4f4f4;
    margin: 20% auto;
    padding: 20px;
    width: 40%;
    box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.17);
    animation-name: modalOpen;
    animation-duration: 0.5s;
}

.closeBtn {
    color: #ccc;
    float: right;
    font-size: 30px;
}

.closeBtn:hover,
.closeBtn:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

@keyframes modalOpen {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}
<div id="simpleModal" class="modal">
    <div class="modal-content">
        <span class="closeBtn">&times;</span>
        <h2>Calcule</h2>
        <div class="row">
            <form class="col s12" style="padding-right:10px;"><!--remova isso só adicionei para funcionar no snipped-->
                <label for="inputhoras"> Quantas Horas a lâmpada ficara ligada? </label>
                <input type="number" placeholder="horas" id="inputhoras" class="active tam-default">
                <p></p>
                <label for="inputkw">Quanto custa o KW/H na sua região?</label>
                <input type="number" placeholder="kw" id="inputkw" class="active tam-default">
                <p></p>
                <label for="inputkw">Qual a quantidade lâmpadas você deseja?</label>
                <input type="number" placeholder="Quantidade de Lâmpadas" id="qtdelamp" class="active tam-default">
                <p></p>
                <div class="input-field col s12">
                    <label>Tipo de lâmpada</label>
                    <select id="lampadaSel" class="tam-default">
                        <option value="" disabled selected>Selecione</option>
                        <option value="1">Lâmpada Bulbo 10W</option>
                        <option value="2">Lâmpada Bulbo 40W</option>
                        <option value="3">Lâmpada Bulbo 60W</option>
                        <option value="4">Lâmpada Corn Led 36W</option>
                        <option value="5">Lâmpada Corn Led 48W</option>
                        <option value="6">Lâmpada Par 30 6W</option>
                        <option value="7">Lâmpada Par 30 10W Dimerizável</option>
                        <option value="8">Lâmpada Par 38 15W</option>
                        <option value="9">Lâmpada Par 38 14W</option>
                        <option value="10">Lâmpada Tubular 9W</option>
                        <option value="11">Lâmpada Tubular 18W</option>
                        <option value="12">Lâmpada Tubular 45W</option>
                    </select>
                </div>
                <h3>Led R$: <span id="lblResultado"></span></h3>
                <h3>Incandescente R$ <span id="lblin"></span></h3>
                <h3> Economia Mensal Incandescente para Led R$ <span id="lblec1"></span></h3>
                <h3>Flourescente R$ <span id="lblflour"></span></h3>
                <h3> Economia Mensal Fluorescente para Led R$ <span id="lblec2"></span></h3>
                <input type="button" id="btnCalcular" class="button" value="Calcular">
            </form>
        </div>
    </div>
</div>

I took the liberty of creating another class .tam-default and add to inputs and select.

Browser other questions tagged html css

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