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

css html width Kyle
fuente
2
También puede consultar stackoverflow.com/questions/2343989/…
Edan Maor
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 */
}
Basheer AL-MOMANI
fuente
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.

Isaac
fuente
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;
olleh
fuente
11

Span abarca ancho y alto solo cuando hacemos que bloquee el elemento.

span {display:block;}
Touhid Rahman
fuente
14
Creo que display: inline-block;es mejor
151291
Al hacer esto, cambiará para todos los tramos, recomendaría usar una clase.
Hola Soy Edu Feliz Navidad
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

Hamed Ali Khan
fuente
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.

Edan Maor
fuente
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.


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

Markling
fuente