3

¿Qué tengo que poner para que me aparezcan los 3 elementos en la misma linea y unidos?

Esto es lo que tengo:

<div class="terms">
    <a class="term" href="#"> {{ 'TERM_SERVICE' | translate }}</a>
    <p class="space" > | </p>
    <a class="privacy" href="#">{{ 'PRIVACY_POLICY' | translate }}</a>
</div>
1
  • Has intentado algo? Cóloca algo de tu css para que podamos echarte un cable.Echale un vistazo a Cómo preguntar.
    – GDP
    el 15 mar. 2018 a las 11:35

4 respuestas 4

3

Para ponerlos en fila no necesitas css en este caso. Aunque obviamente lo tendras que poner para maquetarlo.

Lo que te pasa es que la etiqueta <p> viene con un salto de página "incluido" digamos. Si dejas el texto fuera, entre link y link, veras como te coloca todo seguido.

<div class="terms">
    <a class="term" href="#"> {{ 'TERM_SERVICE' | translate }}</a>
    |
    <a class="privacy" href="#">{{ 'PRIVACY_POLICY' | translate }}</a>
</div>

2
  • En vez de dejarlo solo el pipe, lo pondría dentro de un <span> que tiene los estilos en display: inline.
    – Kleith
    el 15 mar. 2018 a las 12:49
  • En CSS siempre puedes tratar de cambiar la propiedad display. el 15 mar. 2018 a las 14:25
1

Si definitivamente quieres mantener tu código HTML y que aparezcan en la misma línea los 3 elementos, tendrás que usar Flexbox (o al menos es la opción más sencilla), definiendo el <div> como el contenedor:

.terms {
  display: flex;
}

.terms > p {
  margin: 0;
}
<div class="terms">
    <a class="term" href="#"> {{ 'TERM_SERVICE' | translate }}</a>
    <p class="space" > | </p>
    <a class="privacy" href="#">{{ 'PRIVACY_POLICY' | translate }}</a>
</div>

1

si no quieres romperte mucho la cabeza, cambia la etiqueta p por span, es decir:

<span class="space" > | </span>

1

Efectivamente como te han dicho, el elemento

es un elemento de bloque, por lo tanto siempre empiezan en una linea nueva o con un salto, como lo prefieras ver, ademas de ocupar el 100% del espacio.

O bien sacas " | " de la etiqueta

como te han dicho, o si por el contrario necesitas tenerlo en un

pero en linea, hazle que sea un inline-block, y tambien solucionas el problema

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.