Forum PHP.pl > kwadrat przed tekstem

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: kwadrat przed tekstem

Forum PHP.pl > Forum > Po stronie przeglądarki > CSS

Ninanoki

8.05.2012, 20:24:35

czy istnieje jakiś sposób na wstawienie kolorowego kwadratu (obrazek lub div) przed tekst tak jak na obrazku?

sunpietro

9.05.2012, 08:09:43

możesz stworzyć obrazek z kwadratem, a potem ustawić odpowiednio duży padding lewy lub stworzyć pustego diva i dać mu display: block + wymiary i kolor oraz margines prawy

Kod

<div class="kwadrat" style="display: block; width: 16px; height: 16px; float: left; margin-right: 8px; background: green;"> </div><span style="float: left;">Kwadrat</span>

Pamiętaj, inline-styles są złem i użyj do tego arkuszy CSS. To jest tylko przykład na szybko.

rocktech.pl

9.05.2012, 08:20:46

Witam.

[CSS] pobierz, plaintext 
.kwadrat:before {
    content:"\25A0";
    color: orange;
    font-size:1.50em;
}
[CSS] pobierz, plaintext

[HTML] pobierz, plaintext 
<span class="kwadrat">Dyskusja</span>
[HTML] pobierz, plaintext

r4xz

9.05.2012, 15:29:28

lub też kombinacja padding-left z border-left (tylko trzeba ostrożnie - nastąpi zmiana wysokości i mamy prostokąt

)

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.