Onglets dans HTML par Java ; codage bon, mais ...

Bonsoir à vous !

Alors, je n'y connais pas grand chose et je pense que le codage que je vais afficher a bien une base Java .. J'ai parcouru plusieurs sites et tutos pour essayer de galér.... bricoler, quelque chose qui me permettrait d'afficher des onglets sur une page PHP.
Voici donc le code que j'ai obtenus ;

<p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript">// <![CDATA[

// ]]></script>
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {

        //Default Action
        $(".tab_content").hide(); //Hide all content
        $("ul.tabs li:first").addClass("active").show(); //Activate first tab
        $(".tab_content:first").show(); //Show first tab content
        
        //On Click Event
        $("ul.tabs li").click(function() {
                $("ul.tabs li").removeClass("active"); //Remove any "active" class
                $(this).addClass("active"); //Add "active" class to selected tab
                $(".tab_content").hide(); //Hide all tab content
                var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
                $(activeTab).fadeIn(); //Fade in the active content
                return false;
        });

    });
// ]]></script>
</p>
<div class="container">
<ul class="tabs">
<li><a href="#tab1"><input type="button" value="Titre 1" /></a></li>
<li><a href="#tab2"><input type="button" value="Titre 2" /></a></li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<p>TEXTE 1</p>
</div>
<div id="tab2" class="tab_content">
<p>TEXTE 2</p>
</div>
</div>
</div>

Le résultat est pile celui escomptés. Lorsque j'appuis sur le bouton Titre 2, le contenu de "TEXTE 2" s'affiche et "TEXTE 1" disparaît, donc il est parfaitement fonctionnel.
MAIS, je souhaite mettre les boutons côte à côte sur une même ligne et non les uns en dessous des autres à l'aide d'une puce comme c'est actuellement.
Sauf que si j'enlève les balises <li></li>, ça ne fonctionne plus et ça me fait un joyeux foutoir ..

Une solution, est de transformer

<ul class="tabs">
<li><a href="#tab1"><input type="button" value="Titre 1" /></a></li>
<li><a href="#tab2"><input type="button" value="Titre 2" /></a></li>
</ul>

En

<ul class="tabs: inline;">
<li style="display: inline;"><a href="#tab1"><input type="button" value="Titre 1" /></a></li>
<li style="display: inline;"><a href="#tab2"><input type="button" value="Titre 2" /></a></li>
</ul>

Mais malheureusement, le bouton Titre 2 ne fonctionne alors plus et le Texte 2 ne remplace alors pas le Texte 1 ...
J'imagine qu'il faut que je change quelque chose dans le bloc de balise au dessus ? Mais je ne sais pas du tout quelles modifications je dois apporter ..

Merci d'avance pour vos répondes !