Jak konwertować punktory na listę poziomą?

Chcę pokazywać dyskowe punkty na mojej poziomej liście.Jak konwertować punktory na listę poziomą?

Wiem, że po zdefiniowaniu w CSS: display: inline;, definicja klasy: list-style-type: disc nie działa.

Więc to jest moje rozwiązanie:

   <ul> 
        <li>· EN</li> 
        <li>· ES</li> 
        <li>· ES</li> 
        <li>· DE</li> 
        <li>· FR</li> 
       </ul>

Włożyłem punkt płyta symbol kuli ręcznie w mojej liście poziomej, a potem oświadczyli, że w mojej sekcji head: <meta http-equiv="content-type" content="text/html;charset=utf-8" />.

W moim wydaniu edytora coda wyglądają dobrze, ale jeśli spróbuję przeglądać to dostaję to.

Dlaczego? Jak mogę rozwiązać ten problem? W przeciwnym razie, jakie jest najlepsze rozwiązanie, aby wyświetlać punkt na dysku na poziomej liście?

Źródło

2012-11-08 Koala7

Zamiast wybierać display:inline dla Twojego li można zachować je jako bloki i to zrobić:

li { 
    float:left; 
}

Następnie można grać z marginesów do miejsca ich, jak trzeba.

Źródło

2012-11-08 15:20:52 Andy

To samo w sobie nie działa, jeśli chcesz mieć listę z punktorami. Pierwszy pocisk to o.k. ale dla reszty, pociski wyświetlają się na górze słów z poprzedniego elementu na liście. tj. punktor trzeciego elementu wyświetla się na słowie dla drugiego elementu i tak dalej. Poprawiłem to, dodając "margin-right: 30px;" do elementu "li". Zakładam, że są inne rozwiązania, które chciałbym usłyszeć, ponieważ wolałbym, żeby nie określać konkretnej ilości pikseli, ale raczej procent lub sposób, w jaki odstęp jest zależny od czegoś innego. – Rolo

Spróbuj display: inline-block

CSS

ul li{ 
    display:inline-block; 
}

Aby pracować w IE6 i IE7:

CSS

ul li{ 
    display:inline-block; 
    zoom:1; 
}

Źródło

2012-11-08 15:21:22 Enve

Nadal zalecam przechodzenie w lewo, zamiast wyświetlania jako wstawianego bloku, ponieważ starsze wersje IE mogą mieć problemy z wyświetlaniem elementów bloków jako elementów bloków śródliniowych. – Andy

dodaj na swoim powiększeniu css: 1 i działa we wszystkich przeglądarkach – Enve

Zaktualizowałeś swoją odpowiedź zaraz po tym, jak skomentowałem;) – Andy

Problem z twoim podejściem jest dwojaki. Po pierwsze, postać "·", której używasz, nie jest pociskiem; jest MIDDLE DOT z wieloma zastosowaniami, głównie jako separator tekstów. Znak BULLET "•" jest bardziej odpowiedni. Po drugie, deklarujesz UTF-8, co jest w porządku, ale wtedy dokument musi być zakodowany w UTF-8 w rzeczywistości, i najwyraźniej jest (raczej, patrząc stąd, prawdopodobnie jest kodowany Windows-1252).

Jednak jako szybkie rozwiązanie, które nie wymaga rozwiązania problemu z kodowaniem, można napisać BULLET, używając odwołania do jednostki •, np. <li>• EN</li>.

Są oczywiście inne podejścia. Ale jeśli ustawisz display: inline, to przeglądarki nie będą generować punktorów, tak jak robią to tylko dla elementów, które są display: list-item. Będziesz musiał dodać punktory do treści elementu lub użyć wygenerowanej treści (używając pseudoelementu :before).

Źródło

2012-11-08 17:04:20

Jak konwertować punktory na listę poziomą?

Odpowiedz

Powiązane problemy