Ajustar a posição da imagem no estilo da lista?


169

Existe uma maneira de ajustar a posição da imagem no estilo de lista?

Quando uso preenchimento para itens da lista, a imagem permanece em sua posição e não se move com preenchimento ...


1
É realmente muito ruim que isso ainda não esteja incluído na especificação CSS. Que ponto é um list-style-imagese não puder ser posicionado? Parece que, como resultado a maioria das pessoas estão usando soluções como ::beforee background-imageem vez disso.
Mentalist

Respostas:


205

Na verdade não. Seu preenchimento (provavelmente) está sendo aplicado ao item da lista, portanto, afetará apenas o conteúdo real dentro do item da lista.

O uso de uma combinação de estilos de fundo e preenchimento pode criar algo parecido, por exemplo

li {
  background: url(images/bullet.gif) no-repeat left top; /* <-- change `left` & `top` too for extra control */
  padding: 3px 0px 3px 10px;
  /* reset styles (optional): */
  list-style: none;
  margin: 0;
}

Você pode adicionar estilo ao contêiner da lista pai (ul) para posicionar os itens da lista com marcadores, este artigo A List Apart tem uma boa referência inicial.


1
Isso colocará o estilo da lista um pouco mais à direita do que os itens normais da lista, o que é um pouco "desativado" se houver itens normais abaixo. Não conheço a solução independente, mas dependendo da largura da sua imagem, isso melhorará o que: "margin: 0 0 0 -7px;"
E-motiv

Para o posicionamento superior, a alteração do topvalor funcionou para mim, em vez do preenchimento superior. background: url(images/bullet.gif) no-repeat left 8px;
Sridhar Katakam

É uma pena que você não possa estilizar diretamente o estilo de lista. Isso faz as pessoas usarem todos os tipos de soluções alternativas. Eu realmente preferiria usar o estilo de lista para algo que realmente seja do tipo lista, mas não posso fazer com que pareça do jeito que eu quero.
mcv 16/03

75

Normalmente, oculto o tipo de lista e uso uma imagem de plano de fundo móvel

li 
{
    background: url(/Images/arrow_icon.gif) no-repeat 7px 7px transparent;
    list-style-type: none;
    margin: 0;
    padding: 0px 0px 1px 24px;
    vertical-align: middle;
}

O "7px 7px" é o que alinha a imagem de plano de fundo dentro do elemento e também é relativo ao preenchimento.


21

Uma possível solução para essa pergunta que ainda não foi mencionada é a seguinte:

    li {
        position: relative;
        list-style-type: none;
    }

    li:before {
        content: "";
        position: absolute;
        top: 8px;
        left: -16px;
        width: 8px;
        height: 8px;
        background-image: url('your-bullet.png');
    }

Agora você pode usar a parte superior / esquerda do li: before para posicionar o novo marcador. Observe que a largura e a altura do li: before precisam ter as mesmas dimensões que a imagem de fundo escolhida. Isso funciona no Internet Explorer 8 e superior.


Esta é a melhor solução na minha opinião. Se você flutuar o pseudoelemento :: before para a esquerda, obtém o mesmo efeito.
TaylorMac

12

Eu tinha o mesmo problema, mas não podia usar a opção em segundo plano (e não queria usar vários fundos), então pensei em outra solução

este é um exemplo de menu que possui um indicador de quadrado para o item de menu ativo / atual (o estilo de lista padrão é definido como nenhum em outra regra)

nav ul li.active>a:before{
    content: "■";
    position: absolute;
    top: -22px;
    left: 55px;
    font-size: 33px;

}

ele cria um quadrado usando um caractere quadrado com a pseudo classe ": before" e é livremente posicionável usando posicionamento absoluto.


8

Aqui está o que eu fiz para colocar pequenos blocos cinza no lado esquerdo e no centro do texto com uma altura de linha aumentada:

line-height:200%;
padding-left:13px;
background-image:url('images/greyblock.gif');
background-repeat:no-repeat;
background-position:left center;

Espero que isso ajude alguém: D


6

A solução que decidi no final foi modificar a própria imagem para adicionar algum espaçamento.

O uso de uma imagem de plano de fundo na li, como alguns sugerem, funciona em muitos casos, mas falha quando a lista é usada ao lado de uma imagem flutuada (por exemplo, para fazer o texto envolver a imagem).

Espero que isto ajude.


6

Outra opção que você pode fazer é a seguinte:

li:before{
    content:'';
    padding: 0 0 0 25px;
    background:url(../includes/images/layouts/featured-list-arrow.png) no-repeat 0 3px;
}

Use (0 3px) para posicionar a imagem da lista.

Funciona no IE8 +, Chrome, Firefox e Opera.

Eu uso essa opção porque você pode trocar o estilo de lista facilmente e uma boa chance de nem precisar usar uma imagem. (violino abaixo)

http://jsfiddle.net/flashminddesign/cYAzV/1/

ATUALIZAR:

Isso levará em conta o texto / conteúdo entrando na segunda linha:

ul{ 
    list-style-type:none;
}

li{
    position:relative;
}

ul li:before{
    content:'>';
    padding:0 10px 0 0;
    position:absolute;
    top:0; left:-10px;
}

Adicione padding-left: ao li se desejar mais espaço entre o marcador e o conteúdo.

http://jsfiddle.net/McLeodWebDev/wfzwm0zy/


1
a versão atualizada abordará a linha adicional JSfiddle
McLeodWebDev


3

Eu acho que o que você realmente deseja fazer é adicionar o preenchimento (atualmente você está adicionando ao <li>) à tag <ul> e, em seguida, os marcadores serão movidos com o texto do <li>.

Há também a posição de estilo de lista em que você pode procurar. Afeta como as linhas se agrupam em torno das imagens dos marcadores.


3

como resposta "a darren", mas pequenas modificações

li 
{
background: url("images/bullet.gif") left center no-repeat;
padding-left: 14px;
margin-left: 24px;
}

funciona em vários navegadores, basta ajustar o preenchimento e a margem

Editar para aninhado: adicione este estilo para adicionar margem esquerda à lista sub-aninhada

ul ul {margem esquerda: 15 px; }


3

Estou usando algo como isto, parece bastante limpo e simples para mim:

ul { 
     list-style:  none;
     /* remove left padding, it's usually unwanted: */
     padding:  0;
}

li:before {
     content:  url(icon.png);
     display:  inline-block;
     vertical-align:  middle;

     /* If you want some space between icon and text: */
     margin-right:   1em;
}

O código acima funciona como na maioria dos meus casos.
Para um ajuste exato, você pode modificar vertical-align, por exemplo:

vertical-align:  top;

/* or */
vertical-align:  -10px;

/* or whatever you need instead of "middle" */

Você pode ativar list-style: noneem livez de, ulse preferir.


0

Eu acho a resposta aceita um pouco de falsificação, também deve ser empurrada com comandos extras de preenchimento e css.

Eu nunca adiciono preenchimento para listar itens pessoalmente, normalmente controlando a altura da linha e a margem ocasional é suficiente.

Quando tenho um problema de alinhamento com imagens de estilo de lista personalizadas, adiciono apenas um pixel ou dois de espaço extra ao redor do lado necessário para ajustar sua posição em relação a cada linha da lista.


Você nunca teve que lidar com a renderização em vários navegadores, não é?
Volker E.

0

solução com fontawesome

#polyNedir ul li { position:relative;padding-left:20px }
#polyNedir ul li:after{font-family:fontawesome;content:'\f111';position:absolute;left:0px;top:3px;color:#fff;font-size:10px;}

0

Oculte a imagem de marcador padrão e use background-image como você tem muito mais controle, como:

li {
    background-image: url(https://material.io/tools/icons/static/icons/baseline-add-24px.svg);
    background-repeat: no-repeat;
    background-position: left 50%;
    padding-left: 2em;
}

ul {
    list-style: none;
}
<ul>
<li>foo</li>
<li>bar</li>
</ul>


0

My solution:

ul {
    line-height: 1.3 !important;
    li {
        font-size: x-large;
        position: relative;
        &:before {
            content: '';
            display: block;
            position: absolute;
            top: 5px;
            left: -25px;
            height: 23px;
            width: 23px;
            background-image: url(../img/list-char.png) !important;
            background-size: 23px;
            background-repeat: no-repeat;
        }
    }
}

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.