οθόνη CSS: inline ακίνητο με list-style-εικόνας: ακινήτου σε <li> ετικέτες

ψήφοι
17

Αντιμετωπίζω ένα πρόβλημα με τη χρήση CSS για display:inlineτο ακίνητο με το list-style-image:ακίνητο σε <li>ετικέτες. Βασικά, θέλω να εξάγει τα εξής:

* Link 1  * Link 2

όπου *αντιπροσωπεύει μια εικόνα.

Το κάνω αυτό με την παρακάτω κομμάτι του κώδικα HTML:

<ol class=widgets>
    <li class=l1>Link 1</li>
    <li class=l2>Link 2</li>
</ol>

το οποίο είναι διακοσμημένο με το ακόλουθο κομμάτι της CSS:

ol.widgets { list-style-type:none; }

ol.widgets li { display:inline;
                margin-left:10px; }

ol.widgets li.l1 { list-style-image:url(image1.gif); }

ol.widgets li.l2 { list-style-image:url(image2.gif); }

Το πρόβλημα είναι ότι όταν τα στοιχεία της λίστας εμφανίζονται σε σειρά, οι εικόνες που σχετίζονται με τα στοιχεία της λίστας δεν εμφανίζονται. Αυτοί δεν εμφανίζονται αν βγάλω το display:inlineακίνητο στην <li>ετικέτα.

Είναι ένας τρόπος για να κάνει τις εικόνες να εμφανίζονται ακόμα και όταν τα στοιχεία της λίστας εμφανίζονται σε σειρά, ή ότι απλά αδύνατο εκεί;

Δημοσιεύθηκε 09/12/2008 στις 22:25
πηγή χρήστη
Σε άλλες γλώσσες...                            


6 απαντήσεις

ψήφοι
32

Δοκιμάστε να χρησιμοποιήσετε float: leftright) αντί του display: inline. Inline οθόνη αντικαθιστά οθόνη λίστας στοιχείο, το οποίο είναι αυτό που προσθέτει τις κουκκίδες.

Απαντήθηκε 09/12/2008 στις 22:30
πηγή χρήστη

ψήφοι
5

Θέλετε τα στοιχεία της λίστας για να παρατάξει ένα δίπλα στο άλλο, αλλά στην πραγματικότητα δεν είναι ενσωματωμένα στοιχεία. Έτσι τους επιπλέουν αντί:

ol.widgets li { 
    float: left;
    margin-left: 10px;
}
Απαντήθηκε 09/12/2008 στις 22:33
πηγή χρήστη

ψήφοι
4

Είχα παρόμοιο πρόβλημα, να λύσω με τη χρήση CSS «: πριν» .. ο κώδικας φαίνεται αρέσει αυτό:

.widgets li:before{
    content:"• ";
}
Απαντήθηκε 10/07/2013 στις 16:02
πηγή χρήστη

ψήφοι
2

Θέλετε στυλ εικόνας και Nav με πλωτήρα ο ένας στον άλλο και στη συνέχεια χρησιμοποιήστε σαν αυτό

ol.widgets ul
{
list-style-image:url('some-img.gif');
}
ol.widgets ul li
{
float:left;
}
Απαντήθηκε 05/07/2012 στις 12:43
πηγή χρήστη

ψήφοι
2

Αν κοιτάξετε το ακίνητο «οθόνη» στο spec CSS, θα δείτε ότι «λίστα-σημείο» είναι μια ειδική τύπο οθόνης. Όταν ορίζετε ένα στοιχείο για «inline», που πρόκειται να αντικαταστήσετε τον προεπιλεγμένο τύπο εμφάνισης της λίστας στοιχείου, και ο δείκτης είναι ακριβώς ένα μέρος του τύπου λίστας στοιχείο .

Η παραπάνω απάντηση προκύπτει float, αλλά έχω δοκιμάσει αυτό και δεν λειτουργεί (τουλάχιστον στο Chrome). Σύμφωνα με το spec , αν ορίσετε κουτιά σας για να επιπλέουν τα αριστερά ή προς τα δεξιά, «Η“οθόνη”αγνοείται, εκτός αν έχει την τιμή“καμία”.» Παίρνω αυτό να σημαίνει ότι ο προεπιλεγμένος τύπος προβολής της «λίστας στοιχείο» έχει φύγει (λαμβάνοντας το δείκτη με αυτό) το συντομότερο επιπλέουν το στοιχείο.

Επεξεργασία: Ναι, υποθέτω ότι ήταν λάθος. Δείτε κορυφή εισόδου. :)

Απαντήθηκε 09/12/2008 στις 22:38
πηγή χρήστη

ψήφοι
1

Θα ήθελα να προτείνω να μην χρησιμοποιούν list-style-image, όπως συμπεριφέρεται εντελώς διαφορετικά σε διαφορετικά προγράμματα περιήγησης, ιδιαίτερα τη θέση της εικόνας

Αντ 'αυτού, μπορείτε να χρησιμοποιήσετε κάτι σαν αυτό

ol.widgets,
ol.widgets li { list-style: none; }
ol.widgets li { padding-left: 20px; backgroud: transparent ("image") no-repeat x y; }

λειτουργεί σε όλους τους browsers και θα σας δώσει το ίδιο αποτέλεσμα σε διαφορετικά προγράμματα περιήγησης.

Απαντήθηκε 09/12/2008 στις 22:44
πηγή χρήστη

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more