Skip to main content
Cambios en el codigo
Origen Enlace
Hector Lara
  • 912
  • 8
  • 15

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""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>

Puedes utilizar display inline

$(document).ready(function() {
  $('button').click(function() {
    $('.objetos').css({
       "background-color": "yellow",
       "display":"inline"
    });
  });
});
<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>

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>

Origen Enlace
Hector Lara
  • 912
  • 8
  • 15

Puedes utilizar display inline

$(document).ready(function() {
  $('button').click(function() {
    $('.objetos').css({
       "background-color": "yellow",
       "display":"inline"
    });
  });
});
<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>