0

Tengo la siguiente estructura html así:

<div class="container-words">
  <div class="content">
    <label class="activity-1-words">Sherlock</label>
  </div>
  <div class="content">
    <label class="activity-1-words">Holmes,</label>
  </div>
  <div class="content">
    <label class="activity-1-words">que</label>
  </div>
  <div class="content">
    <label class="activity-1-words">en</label>
  </div>
  <div class="content">
    <label class="activity-1-words">un</label>
  </div>
  <div class="content">
    <label class="activity-1-words">principio</label>
  </div>
  <div class="content">
    <label class="activity-1-words">Doyle</label>
  </div>
  <div class="content">
    <label class="activity-1-words">tenía</label>
  </div>

Esta es la forma en que se ve

introducir la descripción de la imagen aquí

Y necesito que está quede de la siguiente manera, como un texto normal.

introducir la descripción de la imagen aquí

No se si solo con estilos (aunque no creo), o si es necesario utilizar JS

Cabe mencionar que esa estructura html surge de una plantilla hecha con .

0

1 respuesta 1

1

No es necesario js. Con la regla display de CSS es suficiente:

div {display:inline}
<div class="container-words">
              <div class="content">
          <label class="activity-1-words">Sherlock</label>
        </div>
              <div class="content">
          <label class="activity-1-words">Holmes,</label>
        </div>
              <div class="content">
          <label class="activity-1-words">que</label>
        </div>
              <div class="content">
          <label class="activity-1-words">en</label>
        </div>
              <div class="content">
          <label class="activity-1-words">un</label>
        </div>
              <div class="content">
          <label class="activity-1-words">principio</label>
        </div>
              <div class="content">
          <label class="activity-1-words">Doyle</label>
        </div>
              <div class="content">
          <label class="activity-1-words">tenía</label>
</div>

3
  • De hecho con aplicarle la regla al div sea por un selector de tipo o por selector de clase alcanza, poner el label esta demás pues los labels son elementos en línea y lo que debemos modificar nadamás son los divs que contienen a estos
    – user128299
    Commented el 2 dic. 2020 a las 21:50
  • Muchas gracias @BetaM fue la solución mas rápida, así lo necesitaba. Commented el 2 dic. 2020 a las 22:08
  • @BetaM, tienes razón. Lo puse casi sin mirar. Gracias por el apunte.
    – cooper
    Commented el 2 dic. 2020 a las 22:27

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.