Cegah linebreak setelah </div>

Apakah ada cara untuk mencegah pemutusan baris setelah div dengan css?

Misalnya saya punya

<div class="label">My Label:</div>
<div class="text">My text</div>

dan ingin ditampilkan seperti:

Label Saya: Teks saya

display:inline;

ATAU

float:left;

ATAU

display:inline-block; - Mungkin tidak berfungsi di semua browser.

Apa tujuan menggunakan divdisini? Saya menyarankan a span, karena ini adalah elemen level sebaris, sedangkan a divadalah elemen level blok.

Perhatikan bahwa setiap opsi di atas akan bekerja secara berbeda.

display:inline;akan mengubah divmenjadi setara dengan a span. Ini akan terpengaruh oleh margin-top, margin-bottom, padding-top, padding-bottom, height, dll

float:left;pertahankan divsebagai elemen level blok. Ini masih akan memakan ruang seolah-olah itu adalah blok, namun lebarnya akan disesuaikan dengan konten (dengan asumsi width:auto;). Itu bisa membutuhkan clear:left;efek tertentu.

display:inline-block;adalah opsi "terbaik dari kedua dunia". Itu divdiperlakukan sebagai elemen blok. Ini menanggapi semua margin, paddingdan heightaturan seperti yang diharapkan untuk elemen blok. Namun, ini diperlakukan sebagai elemen sebaris untuk tujuan penempatan dalam elemen lain.

Baca ini untuk informasi lebih lanjut.

.label, .text {display: inline}

Meskipun jika Anda menggunakannya, Anda mungkin juga mengubah div menjadi span's.

DIV secara default adalah elemen tampilan BLOK, yang berarti ia berada di barisnya sendiri. Jika Anda menambahkan properti CSS display: inline itu akan berperilaku seperti yang Anda inginkan. Tapi mungkin Anda harus mempertimbangkan SPAN?

<span class="label">My Label:</span>
<span class="text">My text</span>

The divelemen elemen blok, sehingga secara default mereka mengambil upp lebar penuh yang tersedia.

Salah satu caranya adalah dengan mengubahnya menjadi elemen sebaris:

.label, .text { display: inline; }

Ini akan memiliki efek yang sama seperti menggunakan spanelemen, bukan divelemen.

Cara lain adalah dengan mengapungkan elemen:

.label, .text { float: left; }

Ini akan mengubah bagaimana lebar elemen ditentukan, sehingga ketebalan hanya akan selebar isinya. Ini juga akan membuat elemen mengapung di samping satu sama lain, mirip dengan bagaimana gambar mengalir di samping satu sama lain.

Anda juga dapat mempertimbangkan untuk mengubah elemen. The divelemen ditujukan untuk divisi dokumen, saya biasanya menggunakan labeldan spanelemen untuk membangun seperti ini:

<label>My Label:</label>
<span>My text</span>

div digunakan untuk memberikan struktur pada situs web atau berisi banyak teks atau elemen, tetapi Anda tampaknya menggunakannya sebagai label, Anda harus menggunakan span, ini akan menempatkan kedua teks secara otomatis berdampingan dan Anda tidak perlu melakukannya kode css untuk itu.

Dan bahkan jika orang lain memberi tahu Anda untuk mengapung elemen, sebaiknya ubah saja tagnya.

Saya rasa saya belum pernah melihat versi ini:

<div class="label">My Label:<span class="text">My text</span></div>

<div id="hassaan">
     <div class="label">My Label:</div>
     <div class="text">My text</div>
</div>

CSS:

#hassaan{ margin:auto; width:960px;}
#hassaan:nth-child(n){ clear:both;}
.label, .text{ width:480px; float:left;}

Coba terapkan clear:noneatribut css ke label.

.label {
     clear:none;
}

coba float div Anda di css

.label {
float:left;
width:200px;
}
.text {
float:left;
}

Saya telah berkali-kali berhasil mendapatkan div tanpa jeda baris setelahnya, dengan bermain-main dengan atribut float css dan atribut width css.
Tentu saja setelah mencari solusi, Anda harus mengujinya di semua browser, dan di setiap browser Anda harus mengubah ukuran jendela untuk memastikan bahwa itu berfungsi di semua keadaan.

gunakan kode ini untuk div normal display: inline;

gunakan kode ini jika Anda menggunakannya di tabel display: inline-table; lebih baik dari tabel

coba ini (dalam CSS) untuk mencegah jeda baris dalam divteks:

white-space: nowrap;