css - todas - que es un valor en html

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

Question

Noob total de la pregunta, 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>​

Fiddle

Básicamente, estoy tratando de emular un botón, hacer que un lapso (o algo) se vea como un botón al lado de un campo de entrada que en realidad no necesita serlo debido a un generador de llenado automático que genera errores al ingresar. Pensé que esta sería una solución rápida por ahora pero obviamente no.

Gracias.

Answer 1

El span toma ancho y alto solo cuando lo hacemos bloque elemento.

span {display:block;}

Answer 2

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

display: inline-block; overflow: hidden; 

Answer 3

Intente usar un div lugar del span o usar la display: block; CSS display: block; o display: inline-block; - span es por defecto un elemento en línea que no puede tomar las propiedades de width y height .

Answer 4

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

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

Adición de overflow:hidden; y mantenerlo en línea resolverá el problema que se acaba de probar en el modo IE8 Quirks

Answer 5

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 tener efecto.

Answer 6

Span es un elemento en línea. No tiene anchura ni altura.

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

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

Answer 7

span se muestran en línea de forma predeterminada, lo que significa que no tienen altura ni ancho.

Intente agregar una display: block a su tramo.