1

.box_order {
  margin-left: 30px;
  margin-top: 20px;
  text-overflow: ellipsis;
}

.words_order {
  font-size: 30px;
  font-family: 'Centuri Ghotic', sans-serif;
  color: #2DB5FF;
}
<div class="box_order">
  <span class="align">
                    <label for="carne" class="words_order">Carne</label>
                        <input type="image" name="carne" class="button_plus" src="styles/image/plusButton.png" alt="foto">
                            <p name="carne">100g</p>
                                <input name="carne" type="image" name="carne" class="button_plus" src="styles/image/plusButton.png" alt="foto">
                </span>
</div>

Hola, tengo un problema, no se como alinear elemetos en una línea horizontal. Actualmente se ve así. introducir la descripción de la imagen aquí

pero quiero que se vea así. introducir la descripción de la imagen aquí

1
  • 1
    ¿Y tu css? Eso es lo principal que tenías que poner. el 11 abr. 2022 a las 2:57

2 respuestas 2

3

No se porqué metes todo el contenido dentro de un <span>, pero lo unico que tiene que ponerle, es al padre de todo el contenido display: flex;

<div class="box_order" >
     <span class="align" style="display: flex">
         <label for="carne" class="words_order">Carne</label>
         <input type="image" name="carne" class="button_plus" src="styles/image/plusButton.png" alt="foto">
         <p name="carne">100g</p>
         <input name="carne" type="image" name="carne" class="button_plus" src="styles/image/plusButton.png" alt="foto">
     </span>
</div>
2

Con Flex box está la solución, pero con algunas pequeñas modificaciones y mejoras en tu código.

No es correcto la etiqueta span sino que tiene que ser: div. Y a este div con clase align le damos los estilos con display: flex.

También le di algunos estilos a los imput y al párrafo para acomodar correctamente.

* {
 box-sizing: border-box
}

.align { 
 display: flex; 
 align-items: center;
 width: 100%;
 height: 100px;
 
 /*margin-left: 30px; 
 margin-top: 20px;*/
 
 padding: 0 10px;
 background-color: lightblue
} 

.words_order { 
 margin: auto;
 margin-left: 0;
 font-size: 30px; 
 font-family: 'Centuri Ghotic', sans-serif; 
 color: #2DB5FF; 
}

.box_order .button_plus {
 margin: 0;
}

.box_order p {
 width: 100px;
 margin: 10px;
 padding: 5px 5px;
 text-align: center;
 overflow: hidden;
 white-space: nowrap;
 text-overflow: ellipsis;
 background: red;
}
<div class="box_order">

    <div class="align">
  
        <label for="carne" class="words_order">Carne</label> 
        
        <input type="image" name="carne" class="button_plus" src="styles/image/plusButton.png" alt="foto"> 
        
        <p name="carne">100g</p> 
        
        <input name="carne" type="image" name="carne" class="button_plus" src="styles/image/plusButton.png" alt="foto"> 
        
    </div> 
    
</div>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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