0

Tengo un form pero por alguna razon el select me descuadra el input de abajo y no se como hacer para que quede bien:

introducir la descripción de la imagen aquí

aqui les pongo el codigo:

html:

<div id="register_new_product" v-if = "hide == true">
        <section class = "register_product">
            <div class = "blocks">   
                <label class = "register_new_product_label">Product type:</label>
                <select class = "register_new_product_select" v-model="type"><option value="syrup">Syrup</option><option value="pills">Pills</option><option value="capsules">Capsules</option><option value="cream">Cream</option><option value="other">Other</option></select>
            </div>
            <div class = "blocks">
                <label class = "register_new_product_labelt" >Product's name:</label>
                <input class = "register_new_product_input" type="text" name="name" v-model="name"/>
            </div>
            <div class = "blocks">
                <label class = "register_new_product_labelt">Quantity per box:</label>
                <input class = "register_new_product_input" type="text" name="quantity_box" v-model="quantity_box"/>
            </div>
            <div class = "blocks">
                <label class = "register_new_product_labelt">Boxes per pallet:</label>
                <input class = "register_new_product_input" type="text" name="box_pallet" v-model="box_pallet"/>
            </div>
            <div class = "blocks">
                 <button @click = "registerproduct" type="button"> Register new product</button>
           </div>
        </section>
    </div> 

css:

.blocks {
margin-bottom: 15px;
}

.register_new_product_label {
display: inline-block;
text-align: right;
float: left;
}

.register_new_product_input {
display: inline-block;
text-align: left;
float: right;  
width: 50%;  
}


.register_new_product_select {
float: right; 
width: 50%;
}

estoy jugando con los valores pero no encuentro forma de que el products's name quede normal, ademas, hay alguan forma de que el label y el input no esten tan alejados uno del otro? gracias :)

2
  • Si no me equivoco tienes código de Vue.js ahi, pudieras usar las facilidades de la tecnología y probar. Dale un vistazo a esto: bootstrap-vue.org/docs/components/form Commented el 7 jun. 2020 a las 6:24
  • si, pero quiero hacerlo primero con css puro y luego meterme con los frameworks, mi orgullo no me deja xD
    – plus
    Commented el 7 jun. 2020 a las 7:15

1 respuesta 1

0

Ya encontré el fallo, en el atributo class del label del nombre

<label class = "register_new_product_labelt" >Product's name:</label>

La clase le sobra la t del final, es

"register_new_product_label"

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.