Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: CSS do pola select option
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
mskiba
Witam, mam problem ze stylami do powyższego pola.

Chce zrobic cos takiego jak tutaj: http://sklep.intercars.com.pl/#katalog , chodzi o ten trzeci option, a dokładniej o jego formatowanie. Może mnie ktoś naprowadzić jak się za to zabrać?
freemp3
Jak dobrze rozumiem chodzi o te pionowe kreski oddzielające poszczególne opcje. Czy zajrzałeś może w źródło strony? To nie jest w żaden specjalny sposób ostylowane. Po prostu została użyta czcionka, w której każdy znak ma identyczną szerokość i w odpowiednich miejscach zostały wstawione pionowe kreski "|".
mskiba
Sorry, ale nie umiem się w tym źródle połapać :/ Czy bardzo nie na miejscu byłaby prośba o jakiś przykład jak to zrobić ?
freemp3
Samymi stylami tego nie zrobisz. Koniecze jest ustawienie pionowych kresek w odpowiednich miejscach. Do tego musisz użyć JS albo PHP, które policzy jaki długi jest ciąg znaków, który chcesz umieścić w każdej z kolumn i dopełnić pozostałe wolne miejsce spacjami lub jeśli tekst jest za długi to go odpowiednio uciąć.
WiruSSS
W pliku CSS

  1. .monospace{
  2. font-family:Consolas, 'Lucida Console', 'DejaVu Sans Mono', monospace;
  3. }


w pliku z formularzem

  1. <select class="monospace">
  2. <option value="value0">Wybierz </option>
  3. <option value="value1">1600-2 | 1573 | 86 | 1967.12 - 1971.10</option>
  4. <option value="value2">2002 | 1990 | 100 | 1971.05 - 1975.07</option>


jako spacji musisz uzyć twardej sapacji, jako że option nie obsługuje white-space:pre ani tym bardziej pre

Kod
& nbsp;

lub

& #160;


bez spacji po & oczywiście wystarczy tylko w miejscach gdzie masz kilka spacji obok siebie, pojedyncze zostaw normalne


co do ilości spacji to:
albo musisz sobie liczyć białe znaki haha.gif
albo rozsądniej użyć php aby to zrobiło za Ciebie smile.gif
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.