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

157

Total pregunta noob, pero aquí.¿La altura y el ancho no se aplican al tramo?

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 un palmo (o algo así) ver como un botón situado junto a una entrada campo que en realidad no necesita ser uno debido a un generador de autocompletar que genera errores al ingresar. Pensé que esto sería una solución rápida por ahora, pero obviamente no.

Gracias.

Fuente

2010-03-22 Kyle

también puede ser que desee comprobar hacia fuera http://stackoverflow.com/questions/2343989/how-to-set-height-property-for-span –

También verifique el estándar, específicamente ht tp: //www.w3.org/TR/CSS2/visudet.html#the-width-property y http://www.w3.org/TR/CSS2/visudet.html#the-height-property, que indica las propiedades "Se aplica a: todos los elementos pero los elementos en línea no reemplazados, las filas de la tabla y los grupos de filas" – outis

287

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

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 */ 
}

Fuente

2010-03-22 09:33:41

Gracias, lo arreglaron. Intenté mostrar: bloque antes, pero el bloque en línea lo arregló. – Kyle

+13

Ese es el problema. Si se especifica 'display: block', el rango se detiene para ser un elemento en línea y un elemento después de que aparezca en la siguiente línea. Necesito un elemento que esté en línea, pero podría tener el ancho deseado. – Paul

span s son de forma predeterminada está representada en línea, lo que significa que no tienen una altura y anchura.

Intente agregar un display: block a su lapso.

Fuente

2010-03-22 09:34:52

El espaciado comienza como un elemento en línea. Puede cambiar su atributo de visualización a bloque, por ejemplo, y sus atributos de altura/ancho comenzarán a tener efecto.

Fuente

2010-03-22 09:35:14

Trate de usar un div en lugar de la span o usar el CSS display: block; o display: inline-block; — span es por defecto un elemento en línea que no puede tener width y height propiedades.

Fuente

2010-03-22 09:36:34 Isaac

a div no es un reemplazo semántico para un tramo. 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 ha sugerido Developer Art es la respuesta correcta. –

La pregunta no proporciona ningún contexto para indicar que un div es intrínsecamente inapropiado semánticamente. – Isaac

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

El espaciado solo toma ancho y alto cuando lo hacemos elemento de bloqueo.

span {display:block;}

Fuente

2013-05-20 19:43:41

+12

Creo 'display: inline-block;' es mejor – 151291

Según comentario de @ Pablo, Si la pantalla: se especifica bloque, lapso deja de ser un elemento en línea y un elemento después de que aparece en la línea siguiente.

Vine aquí para encontrar solución a mi capacidad de un problema de altura y me dieron una solución de mi propia

Adición overflow:hidden; y keeing que línea va a resolver el problema que acabamos de prueba en el modo no estándar IE8

Fuente

2014-03-27 13:08:07

Sigo viendo 'overflow: hidden ; 'en este contexto. "El contenido está recortado, sin barras de desplazamiento" [dice MDN] (https://developer.mozilla.org/en-US/docs/Web/CSS/overflow). Parece contradictorio. ¿Qué hace aquí? –

inspirado en @ Hamed, que añade la siguiente y funcionó para mí:

display: inline-block; overflow: hidden;

Fuente

2016-06-17 08:05:15 olleh

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

Respuesta

Cuestiones relacionadas