Σταθερό πλάτος CSS σε ένα span

Μέσα σε μια μη διατεταγμένη λίστα:

<li><span></span> The lazy dog.</li>
<li><span>AND</span> The lazy cat.</li>
<li><span>OR</span> The active goldfish.</li>

Επιτρέπεται η προσθήκη μιας κλάσης ή ενός χαρακτηριστικού στυλ, αλλά δεν επιτρέπεται η συμπλήρωση του κειμένου και η προσθήκη ή αλλαγή ετικετών.

Η σελίδα αποδίδεται με Courier New.

Ο στόχος είναι το κείμενο μετά το span να είναι ευθυγραμμισμένο.

    The lazy dog.
AND The lazy cat.
OR  The active goldfish.

Η αιτιολόγηση του "OR" είναι ασήμαντη.

Το κείμενο του τεμπέλικου ζώου μπορεί να είναι τυλιγμένο σε ένα πρόσθετο στοιχείο, αλλά θα πρέπει να το ελέγξω ξανά.

Shaeldon
Επεξεργασμένη ερώτηση Κάνε Μάρτιος 2015 в 11:27
Προγραμματισμός
html css
Κάνε Νοέμβριος 2008 в 10:36
25 προβολές

Δυστυχώς τα inline στοιχεία (ή τα στοιχεία που έχουν display:inline) αγνοούν την ιδιότητα width. Αντ' αυτού, θα πρέπει να χρησιμοποιείτε πλωτά divs:


div.f1 { float: left; width: 20px; }
div.f2 { float: left; }
div.f3 { clear: both; }


<div class="f1"></div><div class="f2">The Lazy dog</div><div class="f3"></div>
<div class="f1">AND</div><div class="f2">The Lazy cat</div><div class="f3"></div>
<div class="f1">OR</div><div class="f2">The active goldfish</div><div class="f3"></div>

Τώρα βλέπω ότι πρέπει να χρησιμοποιήσετε spans και λίστες, οπότε πρέπει να το ξαναγράψουμε λίγο:



        span.f1 { display: block; float: left; clear: left; width: 60px; }
    li { list-style-type: none; }



<ul>
<li><span class="f1"> </span>The lazy dog.</li>
<li><span class="f1">AND</span> The lazy cat.</li>
<li><span class="f1">OR</span> The active goldfish.</li>
</ul>
Tamas Czinege
Επεξεργασμένη απάντηση Κάνε Νοέμβριος 2008 в 11:09
Σχόλια (2)

Μπορείτε να το κάνετε χρησιμοποιώντας έναν πίνακα, αλλά δεν είναι καθαρό CSS.


ul{
    text-indent: 40px;
}

li{
    list-style-type: none;
    padding: 0;
}

span{
    color: #ff0000;
    position: relative;
    left: -40px;
}


<ul>
<span></span><li>The lazy dog.</li>
<span>AND</span><li>The lazy cat.</li>
<span>OR</span><li>The active goldfish.</li>
</ul>

Σημειώστε ότι δεν εμφανίζεται ακριβώς όπως θέλετε, επειδή αλλάζει γραμμή σε κάθε επιλογή. Ωστόσο, ελπίζω ότι αυτό σας βοηθά να έρθετε πιο κοντά στην απάντηση.

Σχόλια (0)