Lebar tetap CSS dalam rentang

381

Di dalam daftar yang tidak diurutkan:

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

Menambahkan atribut kelas atau gaya diizinkan, tetapi menambahkan teks dan menambahkan atau mengubah tag tidak diizinkan.

Halaman ini dirender dengan Courier New.

Sasarannya adalah memiliki teks setelah rentang berbaris.

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

Pembenaran "ATAU" tidak penting.

Teks hewan malas dapat dibungkus dengan elemen tambahan tetapi saya harus memeriksa ulang.

html css jason saldo
sumber

427

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>

Luaskan cuplikan

Seperti yang dikatakan Eoin, Anda perlu menempatkan ruang yang tidak pecah ke dalam bentang "kosong" Anda, tetapi Anda tidak dapat menetapkan lebar untuk elemen inline, hanya pelapis / margin sehingga Anda harus membuatnya melayang sehingga Anda dapat beri lebar.

Untuk contoh jsfiddle, lihat http://jsfiddle.net/laurensrietveld/JZ2Lg/

Stephen Caldwell
sumber

1

adalah elemen inline secara default - dan melayang tidak akan memberikan lebar.

codeinthehole

56

Properti float menghasilkan "kotak blok" yang memang memiliki lebar.

Stephen Caldwell

83

Seharusnya itu diplay: inline-block; width: 32px;akan dilakukan di sebagian besar browser modern.

Paulo Bueno

2

@Randy Marsh - tidak, properti width hanya memiliki efek karena properti float mengubah elemen menjadi tampilan blok, seperti yang dijelaskan Stephen Caldwell di atas.

codeinthehole

14

@ PauloBueno bisa Anda ubah diplayuntuk membaca display, BTW, ini berfungsi untuk saya. terima kasih

basarat

507

Di dunia yang ideal Anda akan mencapai ini hanya dengan menggunakan css berikut

<style type="text/css">

span {
  display: inline-block;
  width: 50px;
}

</style>

Ini berfungsi pada semua browser selain dari FF2 dan di bawah.

Firefox 2 dan yang lebih rendah tidak mendukung nilai ini. Anda bisa menggunakan -moz-inline-box, tetapi perlu diketahui bahwa itu tidak sama dengan inline-block, dan mungkin tidak berfungsi seperti yang Anda harapkan dalam beberapa situasi.

Kutipan diambil dari quirksmode

kode masuk lubang
sumber

1

@NicholasPickering .. bagaimana dengan wkhtmltopdf?

codeinthehole

Hm, tidak yakin. Ini hanya kemunduran kecil. Akhirnya harus menggunakan tabel untuk mendapatkan efek yang diinginkan.

Nicholas Pickering

Yah, saya dapat merekomendasikan wkhtmltopdf jika Anda membutuhkan sesuatu yang sesuai dengan CSS3.

codeinthehole

7

Sementara itu, 10 tahun kemudian, ini jelas cara yang harus ditempuh.

vog

19

Sayangnya elemen inline (atau elemen yang menampilkan: inline) mengabaikan properti width. Anda harus menggunakan div mengambang:

<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">&nbsp;</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>

Tamas Czinege
sumber

3

Itu solusi yang bagus. Floating divs meniru perilaku yang dimaksudkan dari bentang ketika mereka berbaris secara horizontal. Sangat penting untuk mengingat yang jelas: kedua garis istirahat. Ini cara yang bagus untuk menghindari tabel dalam konteks ini.

artur

Saya tidak mengerti, tombol elemen inline atau inline-blok, mengapa "lebar" akan berlaku untuk itu? Tombol sepertinya elemen inline kan? Apakah ada dokumen yang menunjukkan properti "tampilan" default dari semua elemen html?

GMsoF

14

The tag perlu ditetapkan untuk display:blockkarena merupakan elemen inline dan akan mengabaikan lebar.

begitu:

<style type="text/css"> span { width: 50px; display: block; } </style>

lalu:

<li><span>&nbsp;</span>something</li>
<li><span>AND</span>something else</li>

Aaron Powell
sumber

Tidak, saya rasa ini tidak berhasil. "sesuatu" pergi ke baris berikutnya. Dan ada "<" yang hilang

user1537366

Seperti yang saya katakan, itu TIDAK berhasil! Lihat jsfiddle.net/m156a0qp keluar. Juga, tidak pernah baik untuk ikut campur dengan CSS dari semua elemen rentang!

user1537366

4

<style type="text/css">

span {
  position:absolute;
  width: 50px;
}

</style>

Anda dapat melakukan metode ini untuk menetapkan lebar untuk elemen sebaris

Augustus Francis
sumber

2

Orang span dalam hal ini tidak dapat menjadi elemen blok karena sisa teks di antara elemen li akan turun. Juga menggunakan float adalah ide yang sangat buruk karena Anda perlu mengatur lebar untuk elemen li keseluruhan dan lebar ini harus sama dengan lebar elemen ul seluruh atau wadah lainnya.

Coba 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 di 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 elemen li relatif Anda memformat elemen span menjadi absolut dan di atas: 0; kiri: 0; sehingga tetap di kiri atas dan Anda mengatur padding-kiri (atau: padding: 0px 0px 0px 80px;) untuk mengatur ruang kosong ini untuk elemen span.

Itu harus bekerja lebih baik untuk kasus-kasus sederhana.

Arturro
sumber

1

coba ini

> <span class="input-group-addon" style="padding-left:6%;
> padding-right:6%; width:150px; overflow: auto;">

Rahmad Saleh
sumber

1

Menggunakan HTML 5.0, dimungkinkan untuk memperbaiki lebar blok teks menggunakan atau <div>.

Sebab , yang penting adalah menambahkan baris CCS berikut

display: inline-block;

Untuk kosong Anda yang penting adalah menambah  ruang.

Kode saya mengikuti

body
	{
	font-family: Arial;
	font-size:20px;
	}

div
	{
	width:200px;
	font-size:80px;
	background-color: lime;
	}
div span
	{
	display:block;
	width:200px;
	background-color: lime;
	}

ul li span
	{
	display: inline-block;
	width: 80px;
	background-color: yellow;
	}
span.tab
	{
	display: inline-block;
	width: 80px;
	background-color: yellow;
	}

&lt;DIV&gt;

<div class='test'>ABCDEF</div>

&lt;SPAN&gt;

<div>
    <span class='test'>ABCDEF</span>
</div

<br>

<ul>
  <li><span class='tab'>&nbsp;</span> The lazy dog.</li>
  <li><span class='tab'>AND</span> The lazy cat.</li>
  <li><span class='tab'>OR</span> The active goldfish.</li>
</ul>

Luaskan cuplikan

PS: Saya sudah mendefinisikan tabkelas karena ul li spanpemilih CSS tidak berfungsi di PC saya!

schlebe
sumber

memasukkan & nbsp; adalah apa yang berhasil untuk saya!

adrien le coarer

0

Anda bisa melakukannya menggunakan tabel, tetapi itu bukan CSS murni.

<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 tidak menampilkan persis seperti yang Anda inginkan, karena itu beralih baris pada setiap opsi. Namun, saya harap ini membantu Anda mendekati jawaban.

luiscubal
sumber

-1

Yah, selalu ada 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 apakah itu yang Anda maksud dengan "melapisi" teks? Itu pekerjaan yang ambigu dalam konteks ini.

Ini terdengar seperti pertanyaan pekerjaan rumah. Saya harap Anda tidak berusaha membuat kami mengerjakan pekerjaan rumah Anda untuk Anda?

eaolson
sumber

-1

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>

Luaskan cuplikan

Pepe Unodostres
sumber

Lebar tetap CSS dalam rentang

Jawaban: