¿La altura y el ancho no se aplican al tramo?


254

Pregunta novata total, pero aquí.

CSS

.product__specfield_8_arrow {

    /*background-image:url(../../upload/orng_bg_arrow.png);
    background-repeat:no-repeat;*/
    background-color:#fc0;
    width:50px !important;
    height:33px !important;
    border: 1px solid #dddddd;
    border-left:none;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-bottom-left-radius:0px;
    border-top-left-radius:0px;
    -moz-border-radius-bottomleft:0px;
    -moz-border-radius-topleft:0px;
    -webkit-border-bottom-left-radius:0px;
    -webkit-border-top-left-radius:0px;
    margin:0;
    padding:2px;
    cursor:pointer;
}​​​

HTML

<span class="product__specfield_8_arrow">&nbsp;</span>

Violín

Básicamente, estoy tratando de emular un botón, hacer que un espacio (o algo así) parezca un botón al lado de un campo de entrada que en realidad no necesita ser uno debido a un generador de relleno automático que genera errores en Enter. Pensé que esto sería una solución rápida por ahora, pero obviamente no.

Gracias.



2
Compruebe también el estándar, específicamente w3.org/TR/CSS2/visudet.html#the-width-property y w3.org/TR/CSS2/visudet.html#the-height-property , que establece las propiedades "Se aplica a: todos los elementos excepto los elementos en línea no reemplazados, las filas de la tabla y los grupos de filas "
publica el

Respuestas:


426

Span es un elemento en línea. No tiene ancho ni alto.

Podría convertirlo en un elemento de nivel de bloque, luego aceptará sus directivas de dimensión.

span.product__specfield_8_arrow
{
    display: inline-block; /* or block */
}

99
Gracias, lo arreglé. Intenté display: block antes pero el bloque en línea lo solucionó.
Kyle

21
Ese es el problema. Si display: blockse especifica, span deja de ser un elemento en línea y un elemento después de que aparezca en la línea siguiente. Necesito un elemento que esté en línea, pero que pueda tener el ancho deseado.
Paul

66
una mejor solución es la pantalla del usuario: bloque en línea
Anant

37

Intente usar un en divlugar de spano usar el CSS display: block;o display: inline-block;- spanpor defecto es un elemento en línea que no puede tomar widthy heightpropiedades.


99
un div no es un reemplazo semántico para un lapso. Un span es un contenedor de texto, mientras que un div es un contenedor de diseño. Aplicar un estilo de bloque en línea como lo ha sugerido Developer Art es la respuesta correcta.
Brian Scott,

3
La pregunta no proporciona contexto para indicar que un div es inherentemente inapropiado semánticamente.
Isaac

1
En realidad, al leer el marcado del operador, en realidad parece que el elemento en cuestión se está utilizando para mostrar simplemente una imagen de fondo. En este caso, un div en realidad sería más apropiado. -1 eliminado del comentario original de Isaac.
Brian Scott,

Además, traté de usar un div antes de cambiar a span, siempre se muestra debajo del div anterior. Así que fui con Span :)
Kyle

22

Inspirado en @Hamed, agregué lo siguiente y funcionó para mí:

display: inline-block; overflow: hidden; 


9

Según el comentario de @Paul, si se especifica display: block, span deja de ser un elemento en línea y un elemento después de que aparezca en la línea siguiente.

Vine aquí para encontrar una solución a mi problema de altura de tramo y obtuve una solución propia

Agregarlo overflow:hidden;y mantenerlo en línea resolverá el problema recién probado en el modo IE8 Quirks


Sigo viendo overflow:hidden;en este contexto. "El contenido está recortado, sin barras de desplazamiento", dice MDN . Parece contradictorio. Que hace aqui
Bob Stein

8

spanLos s se muestran por defecto en línea, lo que significa que no tienen altura ni ancho.

Intenta agregar un display: blocka tu lapso.


6

Span comienza como un elemento en línea. Puede cambiar su atributo de visualización para bloquear, por ejemplo, y sus atributos de altura / anchura comenzarán a surtir efecto.


2

span {display:block;} También agrega un salto de línea.

Para evitar eso, use span {display:inline-block;}y luego puede agregar ancho y alto al elemento en línea, y también puede alinearlo dentro del bloque:

span {
        display:inline-block;
        width: 5em;
        font-weight: normal;
        text-align: center
     }

más aquí

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.