0
258
VistasMaterial UI ItemList Tratando de acercar el icono al elemento
Estoy tratando de acercar este ícono al texto, pero no estoy exactamente seguro de cómo.
Cuando entro en modo desarrollador me muestra esto. 
No sé lo que significa la cosa púrpura. Mi objetivo final es tratar de mover el ícono a la esquina superior derecha de donde está el cuadro "Steve First", pero no estoy seguro de cómo hacerlo. Este es el código donde estoy construyendo mi lista.
<List style={{ display: "flex", flexDirection: "row", padding: 0 }}> <ListItem className={classes.removePerson} secondaryAction={ <IconButton sx={{ zIndex: "1", width: "15px !important", height: "15px !important" }} > <RemoveCircleIcon sx={{ fontSize: "20px" }} /> </IconButton> } > <ListItemAvatar> <Avatar src="stuff.img" /> </ListItemAvatar> <ListItemText className={classes.peopleListSpacing} primary="Steve First Steve First Steve First" /> </ListItem> <ListItem className={classes.removePerson} secondaryAction={ <IconButton sx={{ zIndex: "1", width: "15px !important", height: "15px !important" }} > <RemoveCircleIcon sx={{ fontSize: "20px" }} /> </IconButton> } > <ListItemAvatar> <Avatar src="stuff.img" /> </ListItemAvatar> <ListItemText className={classes.peopleListSpacing} primary="Steve First" /> </ListItem> </List> El código muestra esto. 
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
El espacio morado es el espacio disponible que no se está utilizando.
¿Qué tal si hacemos de nuestro ListItemAvatar un contenedor flexible y lo centramos? Es posible que desee alinearlo a la derecha, luego solo agregue un poco de margen derecho.
Cree una nueva propiedad listItemAvatar en su objeto de clases.
display: flex; justify-content: center; <ListItemAvatar className={classes.listItemAvatar}> <Avatar src="..." /> </ListItemAvatar>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta