1

He realizado un pequeño y sencillo ejercicio con jQuery, donde tengo unos <h2> que los cambio de color cuando pulso un botón. Me funciona pero el color me coge toda la ventana del navegador y me preguntada si había alguna manera de cambiar solo el fondo de color hasta donde termina las letras.

Imagen

Código:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Ejercicio 4</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-3.3.1.js"></script>
        <script>
            $(document).ready(function ()
            {
               $('button').click(function ()
               {
                  $('.objetos').css("background-color","yellow");
               });
            });
        </script>
    </head>
    <body>
        <h2>Lenguaje C</h2>
        <h2 class="objetos">Java</h2>
        <h2 class="objetos">JavaScript</h2>
        <h2 class="objetos">PHP</h2>
        <button>Orientados a objetos?</button>
    </body>
</html>

3 respuestas 3

6

Puedes utilizar display: table. De esta manera, el fondo se ajustará al contenido y no se te situarán en la misma línea como ocurre con display: inline o display: inline-block.

Tu ejemplo modificado:

$(document).ready(function ()
{
   $('button').click(function ()
   {
      $('.objetos').css("background-color","yellow");
   });
});
.objetos{
   display: table;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Lenguaje C</h2>
<h2 class="objetos">Java</h2>
<h2 class="objetos">JavaScript</h2>
<h2 class="objetos">PHP</h2>
<button>Orientados a objetos?</button>

1

Puedes utilizar display inline-block, esto permitira que el background solo llegue hasta donde haya texto. Si quieres que esten uno debajo del otro entonces metes cada h2 dentro de un div.

Ejemplo a continuación

$(document).ready(function() {
  $('button').click(function() {
    $('.objetos').css({
       "background-color": "yellow",
       "display":"inline-block"
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block">
   <h2>Lenguaje C</h2>
</div>
<div class="block">
   <h2 class="objetos">Java</h2>
</div>
<div class="block">
<h2 class="objetos">JavaScript</h2>
</div>
<div class="block">
<h2 class="objetos">PHP</h2>
</div>
<button>Orientados a objetos?</button>

0

El problema es que los h2 traen por defecto la propiedad css "display" con valor "block".

Es decir ocupan todo el espacio disponible del contenedor horizontalmente, una posible solución seria que la cambiaras esta propiedad de la siguiente manera:

<style>
     h2.objetos {
          /* Para mostrar el elemento en linea */
          display:inline-block;
          /* Si deseas conservar el salto de linea de los h2 */
          float:left; 
          clear:both;
     }
</style>

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.