Dalam unordered list:
<li><span></span> The lazy dog.</li>
<li><span>AND</span> The lazy cat.</li>
<li><span>OR</span> The active goldfish.</li>
Menambahkan kelas atau gaya atribut diperbolehkan tetapi padding teks, dan menambahkan atau mengubah kategori tidak diperbolehkan.
Halaman rendering dengan Kurir Baru.
Tujuannya adalah untuk memiliki teks setelah span berbaris.
The lazy dog.
AND The lazy cat.
OR The active goldfish.
Pembenaran "ATAU" adalah penting.
Malas hewan teks dapat dibungkus dalam sebuah elemen tambahan tapi aku'll harus periksa.
Dalam dunia yang ideal, anda'd mencapai hal ini hanya menggunakan css berikut
<style type="text/css">
span {
display: inline-block;
width: 50px;
}
</style>
Ini bekerja pada semua browser selain dari FF2 dan di bawah ini.
Firefox 2 dan rendah don't dukungan ini nilai. Anda dapat menggunakan -moz-inline-kotak, tetapi diketahui bahwa hal itu's tidak sama dengan inline-block, dan itu mungkin tidak bekerja seperti yang anda harapkan dalam beberapa situasi.
Kutipan yang diambil dari quirksmode
ul {
list-style-type: none;
padding-left: 0px;
}
ul li span {
float: left;
width: 40px;
}
<ul>
<li><span></span> The lazy dog.</li>
<li><span>AND</span> The lazy cat.</li>
<li><span>OR</span> The active goldfish.</li>
</ul>
Seperti Eoin mengatakan, anda harus menempatkan non-breaking space ke "kosong" bentang, tetapi anda dapat't menetapkan lebar untuk inline elemen, hanya padding/margin sehingga anda'll perlu untuk membuatnya mengapung sehingga anda dapat memberikan lebar.
Untuk jsfiddle contoh, lihat
Sayangnya inline elemen (atau elemen-elemen yang memiliki display:inline) mengabaikan lebar properti. Anda harus menggunakan floating div bukan:
<style type="text/css">
div.f1 { float: left; width: 20px; }
div.f2 { float: left; }
div.f3 { clear: both; }
</style>
<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>
Sekarang saya melihat anda perlu menggunakan bentang dan daftar, jadi kita perlu menulis ulang ini sedikit:
<html><head>
<style type="text/css">
span.f1 { display: block; float: left; clear: left; width: 60px; }
li { list-style-type: none; }
</style>
</head><body>
<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>
</body>
</html>
The <span>
tag perlu diatur untuk display:block
seperti itu adalah sebuah inline elemen dan akan mengabaikan lebar.
jadi:
<style type="text/css"> span { width: 50px; display: block; } </style>
dan kemudian:
<li><span> </span>something</li>
<li><span>AND</span>something else</li>
Orang-orang span dalam hal ini bisa menjadi elemen blok karena seluruh teks di antara elemen li akan turun. Juga menggunakan float adalah ide yang sangat buruk karena anda akan perlu untuk mengatur lebar untuk seluruh li elemen dan lebar ini akan perlu untuk menjadi sama dengan lebar dari seluruh elemen ul atau wadah lainnya.
Mencoba sesuatu seperti ini di html:
<li><span></span><strong>The</strong> lazy dog.</li>
<li><span>AND</span> <strong>The</strong> lazy cat.</li>
<li><span>OR</span> <strong>The</strong> active goldfish.</li>
dan dalam css
li {position:relative;padding-left:80px;} // 80px or something else
li span {position:absolute;top:0;left:0;}
li strong {color:red;} // red or else
jadi, ketika li elemen adalah relatif anda memformat elemen span untuk menjadi mutlak dan pada top:0;left:0; sehingga tetap kiri atas dan anda mengatur padding-left (atau: padding:0px 0px 0px 80px;) untuk mengatur hal ini membebaskan ruang untuk elemen span.
Ini harus bekerja dengan baik untuk kasus-kasus yang sederhana.
Nah, ada's selalu metode brute force:
<li><pre> The lazy dog.</pre></li>
<li><pre>AND The lazy cat.</pre></li>
<li><pre>OR The active goldfish.</pre></li>
Atau kau yang dimaksud dengan "padding" text? Yang's ambigu bekerja dalam konteks ini.
Ini terdengar seperti sebuah pertanyaan pr. Saya harap anda're tidak mencoba untuk mendapatkan kita untuk melakukan pekerjaan rumah anda untuk anda?
Anda dapat melakukannya dengan menggunakan tabel, tetapi tidak murni CSS.
<style>
ul{
text-indent: 40px;
}
li{
list-style-type: none;
padding: 0;
}
span{
color: #ff0000;
position: relative;
left: -40px;
}
</style>
<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>
Perhatikan bahwa itu doesn't tampilan persis seperti yang anda inginkan, karena itu switch line pada masing-masing pilihan. Namun, saya berharap bahwa ini membantu anda datang lebih dekat ke jawaban.