css - deshacerse de los espacios entre vanos

Estoy tratando de emular una barra de pestañas con htmlcss - deshacerse de los espacios entre vanos

Me gustaría que el ancho de cada pestaña se ajuste de acuerdo a la longitud del texto (es decir, sin ancho fijo) y para el ajuste de línea en caso de que exceda el ancho de la pantalla

casi me he conseguido que

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

pero, hay un espacio muy molesto entre la imagen lengüeta de apertura y el cierre ...

Como puede ver, lo he intentado con relleno, espacio y borde, sin suerte ...

- editar He intentado reemplazar los tramos con una pequeña mesa (una fila, tres TD) pero es la lo mismo, solo el espacio entre es más pequeño ...

Fuente

2010-03-25 opensas

intento de añadir espacios en blanco: nowrap; – ant

lo probé, es lo mismo ... – opensas

Deshágase de los saltos entre los tramos. Ejemplo:

<div class='tab'> 
    <span class='tab_left'>&nbsp;</span><span class='tab_middle'>very very looong</span><span class='tab_right'>&nbsp;</span> 
</div>

Las líneas nuevas se cuentan como espacio en HTML.

Fuente

2010-03-25 22:38:03 njbair

difícil de probar sin las imágenes, pero agregué el color de fondo y la pantalla: en línea con las pestañas raíz. Por favor, intente esto:

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

Fuente

2010-03-25 22:41:15 Cheddar

buen intento, pero el espacio sigue ahí, en rojo en la primera pestaña y verde en la segunda ... – opensas

Tab medio, la izquierda y la derecha también tienen que flotar a la izquierda.

Fuente

2010-03-25 22:46:54 BigChrisDiD

La respuesta de njbair es correcta.

Otra opción fue utilizar una tabla, con la propiedad border-collapse: collapse;.

Otro problema: en Internet Explorer 6.0, el primer enfoque (tramos) no funciona como se esperaba. Al cambiar el tamaño de la ventana, IE wordwraps el tramo, rompiendo la pestaña, mientras que con el enfoque de la tabla, incluso IE envía toda la pestaña.

Fuente

2010-03-25 22:56:21 opensas

Otra forma además njbair 's uno es añadir font-size: 0 al elemento padre. Prefiero este porque es estéticamente mejor para el diseño de pestañas.

lugar de esto:

<div id="tabs"> 
    <span id="mytab1">Tab 1</span><span id="mytab2">Tab 2</span><span id="mytab3">Tab 3</span> 
</div>

... podemos usar esto:

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

... que se ve mejor :)

Por supuesto, no se olvide defina su tamaño real de fuente para las pestañas.

EDITAR:
Hay una forma más para deshacerse de los espacios: mediante la adición de comentarios.

Ejemplo:

<div id="tabs"> 
    <span id="mytab1">Tab 1</span><!-- 
    --><span id="mytab2">Tab 2</span><!-- 
    --><span id="mytab3">Tab 3</span> 
</div>

Fuente

2012-07-11 10:31:09

Esta debería ser la respuesta aceptada, ya que hace lo que es el OP solicitando El OP quería que los espacios entre los tramos no se vieran, y la respuesta aceptada es simplemente eliminarlo del html. –

@HectorOrdonez La gente ha estado preguntando meta si debería haber una respuesta aceptada por la comunidad, pero fue rechazada, principalmente porque es la respuesta que más se adapta a OP y no a la comunidad, sin embargo, la respuesta de la comunidad es la más votada. Así que no te molestes sobre cuál debería ser la respuesta aceptada;) –

Buen consejo sobre los comentarios. Difícil elegir cuál es el menor de los dos males: el hack de CSS que requiere duplicar la información del tamaño de la fuente o HTML hack que se siente como cambiar el contenido para lograr el estilo deseado. –

Otra opción es utilizar nagative letter-spacing:-10px - que tiene un impacto claro en el formato.

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

Conseguí esta idea gracias a this answer

Fuente

2017-09-05 08:23:59 CodeGust

css - deshacerse de los espacios entre vanos

Respuesta

Cuestiones relacionadas