Se débarrasser des espaces entre les travées

Je suis en train de simuler une barre d'onglet avec HTML.

J'aimerais que la largeur de chaque onglet pour être réglé en fonction de la longueur du texte (qui est, pas de largeur fixe) et à retour automatique à la ligne dans le cas où elle dépasse la largeur de l'écran.

J'ai presque atteint:

<html>
<head>

<style type="text/css">
    #myTabs .tab {
    float: left;
    }

    #myTabs .tab_middle {
        margin: 0;
        padding: 0;
        border: none;
    background-image:url('images/tabs/tab_middle.png');
    }

    #myTabs .tab_left {
        margin: 0;
        padding: 0;
        border: none;
        background-image:url('images/tabs/tab_left.png');
    }

    #myTabs .tab_right {
        margin: 0;
        padding: 0;
        border: none;
    background-image:url('images/tabs/tab_right.png');
    }

</style>

</head>

<body>

<div id="myTabs">
  <div class='tab'>
        <span class='tab_left'>&nbsp;</span>
        <span class='tab_middle'>very very looong</span>
        <span class='tab_right'>&nbsp;</span>
    </div>
  <div class='tab'>
        <span class='tab_left'>&nbsp;</span>
        <span class='tab_middle'>another loooong tab</span>
        <span class='tab_right'>&nbsp;</span>
    </div>
    <div style='clear:both'></div>
</div>

</body>
</html>

Mais, il y a une très ennuyeux de l'espace entre l'ouverture de l'onglet image et le cours de clôture.

Comme vous pouvez le voir, j'ai essayé avec un rembourrage, de l'espacement et de la frontière, avec pas de chance.

EDIT:

J'ai essayé de remplacer le couvre avec une petite table (une ligne, trois <td>s), mais c'est la même, seul l'espace entre les deux est plus petit.

InformationsquelleAutor opensas | 2010-03-25

49

Se débarrasser des retours à la ligne entre les travées. Exemple:
```
<div class='tab'>
  <span class='tab_left'>&nbsp;</span><span class='tab_middle'>very very looong</span><span class='tab_right'>&nbsp;</span>
</div>
```
Retours à la ligne sont comptés comme un espace en HTML.

InformationsquelleAutor njbair
57

Une autre façon d'ailleurs njbair's l'un est d'ajouter font-size: 0 à l'élément parent.
Je préfère celui-ci car il est esthétiquement mieux pour l'onglet conception.

Au lieu de cela:
```
<div id="tabs">
    <span id="mytab1">Tab 1</span><span id="mytab2">Tab 2</span><span id="mytab3">Tab 3</span>
</div>
```
...nous pouvons utiliser ceci:
```
<div id="tabs" style="font-size: 0;">
    <span id="mytab1">Tab 1</span>
    <span id="mytab2">Tab 2</span>
    <span id="mytab3">Tab 3</span>
</div>
```
...qui semble mieux 🙂

Bien sûr, n'oubliez pas de définir votre vraie taille de la police pour les onglets.

MODIFIER:

Il y a un moyen de plus pour se débarrasser des espaces: par l'ajout de commentaires.

Exemple:
```
<div id="tabs">
    <span id="mytab1">Tab 1</span><span id="mytab2">Tab 2</span><span id="mytab3">Tab 3</span>
</div>
```
- Ce doit être la accepté de répondre, comme elle fait ce que l'OP demande. L'OP voulait les espaces entre les travées de ne pas être vu, et l'on a accepté la réponse est juste de l'enlever de l'html.
- Personnes a été demandé sur meta si il devrait y avoir une communauté accepté de répondre, mais elle a été rejetée, principalement parce que c'est la réponse qui convient à des OP les plus et non de la communauté, une communauté de réponse est le plus upvoted un. Donc ne vous inquiétez pas au sujet de ce qui doit être la accepté de répondre 😉
- Astuce sympa sur les commentaires. Difficile de choisir ce qui est le moindre de deux maux: CSS hack nécessitant la duplication de taille de police info ou HTML hack qui se sent comme à la modification du contenu pour obtenir le style désiré.
- Juste sonner comme l'auteur de la accepté de répondre. Vous remarquerez que l'OP a l'aide de 3 travées par onglet: l'un servant du bord gauche, l'un à la partie moyenne, et un, comme le bord droit. Dans ce contexte, il peut encore mettre chaque onglet sur une nouvelle ligne, mais pas entre les travées qui constituent le même onglet.
- Ce qui se passe lorsque vous ajoutez des commentaires?
InformationsquelleAutor Nikola K.

Une autre option est d'utiliser nagative letter-spacing:-10px - qui a un léger impact sur la mise en forme.

<div id="tabs" style="letter-spacing:-10px;">
    <span id="mytab1" style="letter-spacing:1px;">Tab 1</span>
    <span id="mytab2" style="letter-spacing:1px;">Tab 2</span>
    <span id="mytab3" style="letter-spacing:1px;">Tab 3</span>
</div>

Eu cette idée grâce à cette réponse

InformationsquelleAutor CodeGust

dur à tester sans les images, mais j'ai ajouté de la couleur d'arrière-plan et display:inline à la racine des onglets. Veuillez essayer ceci:

<html>
<head>

<style type="text/css">
    #myTabs .tab {
        float: left;
        display:inline;
    }

    #myTabs .tab_middle {
        margin: 0;
        padding: 0;
        border: none;
    background-image:url('images/tabs/tab_middle.png');
    }

    #myTabs .tab_left {
        margin: 0;
        padding: 0;
        border: none;
        background-image:url('images/tabs/tab_left.png');
    }

    #myTabs .tab_right {
        margin: 0;
        padding: 0;
        border: none;
    background-image:url('images/tabs/tab_right.png');
    }

</style>

</head>

<body>

<div id="myTabs">
  <div class='tab' style="background-color:Red;">
        <span class='tab_left'>&nbsp;</span>
        <span class='tab_middle'>very very looong</span>
        <span class='tab_right'>&nbsp;</span>
    </div>
  <div class='tab' style="background-color:Green;">
        <span class='tab_left'>&nbsp;</span>
        <span class='tab_middle'>another loooong tab</span>
        <span class='tab_right'>&nbsp;</span>
    </div>
    <div style='clear:both'></div>
</div>

</body>
</html>

bien essayé, mais l'espace est toujours là, en rouge sur le premier onglet et le vert sur la deuxième...

InformationsquelleAutor

0

Onglet milieu, à gauche et à droite aussi besoin de float à gauche.

InformationsquelleAutor BigChrisDiD
0

njbair la réponse est correcte.

Une autre option est d'utiliser un tableau, avec le border-collapse: collapse; propriété.

Un autre gotcha: dans Internet Explorer 6.0, la première approche (s'étend) ne fonctionne pas comme prévu. Lors du redimensionnement de la fenêtre, c'est à dire wordwraps la durée, de rupture de l'onglet, alors qu'avec l'approche de table, même IE envoie l'ensemble de l'onglet.

InformationsquelleAutor opensas

Vous devez vous connecter pour publier un commentaire.