Estoy tratando de obtener todo el texto en esta lista para estar al ras contra la viñeta. Sin embargo, el texto se ajusta debajo de la imagen de la viñeta. Intenté cambiar el relleno/margen en el a y el li y también el nowrap, pero eso solo lo hace sobresalir del borde derecho. Las viñetas son los logotipos de WBI en Noticias: http://circore.com/womensbasketball/ ¿Alguna idea? ¡Gracias!texto está envolviendo bajo viñeta en la lista de css
Hice esto en su sitio con Firefox y funciona
#menu-news li:first-of-type {
border-top: medium none;
height: 55px;
list-style-position: inside;
margin-left: 8px;
margin-right: 15px;
padding: 10px 10px 10px 66px;
vertical-align: top;
}
#menu-news li {
background: url("images/wbismall.png") no-repeat scroll 0 0 transparent;
border-top: 1px solid #666666;
height: 55px;
list-style-position: inside;
margin-left: 10px;
margin-right: 15px;
padding: 10px 10px 10px 66px;
}
Usted podría intentar
ul {
list-style-position: outside;
}
pero yo personalmente uso una imagen de fondo y algo de relleno, algo así como:
li {
list-style: none;
background: transparent url(your/icon.png) no-repeat left center;
padding-left: 20px; /* or whatever the width of your image is, plus a gap */
}
Ver esta página para más detalles: http://www.tm4y.co.za/general-tips/css-bulleted-lists-styling.html
haciendo del fondo la imagen de la bala y sacando las balas. sin embargo, la segunda línea de texto en el enlace se ajusta a la imagen. estos son todos los títulos de publicaciones de WordPress, por lo que no puedo agregar un
fácil allí. –
Elaine
¿Ha agregado relleno al elemento para mover el texto más allá de la imagen? –
la imagen es una imagen de fondo detrás de la lista, por lo que no puedo agregar relleno. – Elaine
Usted necesita agregar display: inline-block; al enlace dentro del elemento td.
Su clase era la siguiente:
#menu-news li a {
color: #000000;
font-family: Arial,Helvetica,sans serif;
font-size: 13px;
margin-top: 10px;´
}
Pero hay que tener este aspecto:
#menu-news li a {
display: inline-block;
color: #000000;
font-family: Arial,Helvetica,sans serif;
font-size: 13px;
margin-top: 10px;
width: 200px;
}
¡sí! todo se está comportando ahora. ¡gracias a todos! – Elaine
Esto funciona para listas desordenadas:
#menu-news ul {
list-style:outside circle;
margin-left:60px;
}
#menu-news ul li {
padding-left:20px;
}
El margin-left mueve toda la lista en 60px.
El padding-left solo es necesario si desea espacio adicional entre el punto de la viñeta y el texto del elemento de la lista. El texto del elemento de lista se ajusta debajo de sí mismo y no debajo de la viñeta.
¿Puede agregar el código pertinente original en esta pregunta para que sea útil para las personas en el futuro que puedan tener el mismo problema? – KatieK
El código es el mismo en mi respuesta a excepción de la especificación de margen izquierdo. – PAULDAWG