Mam plik html z nieuporządkowaną listą. Chcę pokazywać elementy listy w poziomie, ale nadal trzymam pociski. Bez względu na to, co próbuję, za każdym razem, gdy ustawiam styl na inline, aby spełnić wymagania horyzontalne, nie mogę uzyskać pocisków do wyświetlenia.Pokaż nieuporządkowaną listę w linii, ale zachowaj naboje
Najlepszą opcją, jaką zobaczyłem w innych odpowiedziach, było użycie float:left;. Niestety, nie działa w IE7, co jest wymogiem tutaj, ale nadal tracisz punkt. Nie bardzo lubię też używać obrazu tła.
Co mam zamiar zrobić (to, że nikt inny nie zasugerował, stąd samo-odpowiedź) idzie z ręcznym dodawaniem • do mojego html, zamiast stylizowania tego. Jest mniej niż idealna, ale jest to najbardziej zgodna opcja, jaką znalazłem.
edit: * Aktualne czytelnikom zapoznanie się z oryginalną datą postu. IE7 raczej nie będzie już problemem.
Czy próbowałeś float: left na swoim <li/>? Coś takiego:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
ul li {
float: left;
margin-left: 2em;
}
</style>
</head>
<body>
<ul>
<li>test</li>
<li>test2</li>
</ul>
</body>
</html>
Testowałem jedynie Firefox 3.0.1, działa tam. Ustawienie margin jest ustawione, ponieważ w innym przypadku punktor pokrywa się z poprzednim elementem.
Dodatkowo: Należy uważać, aby po uniesieniu elementów usunąć je z normalnego przepływu, co z kolei powoduje, że <ul/> nie ma żadnej wysokości. Jeśli chcesz dodać obramowanie lub coś takiego, uzyskasz dziwne wyniki.
Jednym ze sposobów, aby to naprawić jest dodanie następujących do stylów:
ul {
overflow: auto;
background: #f0f;
}
To pomogło mi. Float był lewą. – Maddhacker24
Można również użyć obrazu tła na <li> elementy, podszytej zachować tekst z nakładających się go.
li {
background-image: url(i/bullet.gif) no-repeat center left;
padding-left: 20px;
display: inline;
}
Korzystanie z graficznych punktorów niestety nie jest obecnie dobrym rozwiązaniem, ponieważ gdy użytkownik powiększy tekst, obrazy te nie będą odpowiednio skalowane (lub gorsze, pikselowo). Możemy mieć nadzieję, że za kilka lat nie będzie to już problemem (wykorzystanie grafiki wektorowej i poleganie na przeglądarce w celu skalowania obrazów i tekstu). –
Przeglądarka wyświetla punktory, ponieważ właściwość stylu "display" jest początkowo ustawiona na "list-item". Zmiana właściwości wyświetlania na "wbudowane" anuluje wszystkie style specjalne, które otrzymują elementy listy. Powinieneś być w stanie przeprowadzić symulację za pomocą: before selektora i właściwości content, ale IE (przynajmniej przez wersję 7) nie obsługuje ich. Symulowanie go obrazem w tle jest prawdopodobnie najlepszym sposobem na zrobienie tego w przeglądarce.
Utrzymuj wyświetlanie zablokowane, podaj szerokość i ułóż w lewo.
To sprawi, że będą siedzieć obok siebie, co jest jak w linii i powinno zachować styl listy.
Masz na myśli * display: list-item * zamiast * display: block * –
miałem ten sam problem, ale tylko w przeglądarce Internet Explorer (testowałem wersję 7) - nie w Firefox 3 lub Safari 3. Używanie : Przed selektor działa dla mnie:
ul.tabs li {
list-style: none;
float: left;
}
ul.tabs li:before {
content: '\ffed';
margin-right: 0.5em;
}
I Użyłem tutaj kwadratowej kuli, ale normalna kula \ 2022 działałaby tak samo.
... poza tym nie działa w IE7 albo, dlatego, że nie obsługuje: przed selektora. –
można użyć następujących kodu
li {
background-image: url(img.gif) no-repeat center left;
padding-left: 20px;
display: inline;
}
To rzeczywiście bardzo prosty fix. Dodaj następujący numer do ul:
display:list-item;
Dodanie tej linii CSS spowoduje dodanie punktów.
Jeśli przeczytasz inne odpowiedzi/komentarze, zobaczysz, że nie była wtedy obsługiwana przez wymaganą przeglądarkę. Teraz ... to może działać dobrze. –
Można użyć encji znakowych można znaleźć odniesienia: http://dev.w3.org/html5/html-author/charref
<ul class="inline-list>
<li> • Your list item </li>
</ul>
właśnie aprowizacji i wpadłem na ten sam problem z tymi samymi ograniczeniami przeglądarki; kiedy szukałem odpowiedzi, twoja wiadomość pojawiła się bez odpowiedzi. Prawdopodobnie jest już za późno, aby ci pomóc, ale myślałem, że dla dobra potomności, powinienem to opublikować.
Wszystko, co zrobiłem, aby rozwiązać mój problem, to osadzić kolejną listę z jednym elementem w każdym elemencie listy z pierwszej listy; jak tak ...
HTML:
<div class="block-list">
<ul>
<li><ul><li>a</li></ul></li>
<li><ul><li>b</li></ul></li>
<li><ul><li>c</li></ul></li>
</ul>
</div>
CSS:
.block-list > ul > li { display: inline; float: left; }
IE7 strony:
o a o b o c
... to głupie rozwiązanie, ale wydaje praca.
W HTML, dodałem sobie przerwę po każdym li tak:
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
i CSS:
li { float:left; }
Jeśli wybiorę wszystko z listy i skopiuję, otrzymam wypustki HTML w moim tekście po wklejeniu. Obrzydliwy. Podoba mi się alternatywa: użycie obrazu tła. – Matthew
@Matthew - nie było opcji w tym czasie. Rozwiązanie przyjęte w ciągu 4 lat od tego czasu było przeniesienie wszystkich do IE8, gdzie dostępne były bardziej rozsądne opcje. –
Przepraszam, że wychowuję stare duchy (wiem, że IE7 może być trochę upiorny). Znalazłem to przez wyszukiwarkę Google i pomyślałem, że powinienem poruszyć ten punkt. – Matthew