pengembangan-web-mp-pd.com

Cara memasukkan jeda baris dalam dokumen HTML menggunakan CSS

Saya sedang menulis layanan web, dan saya ingin mengembalikan data sebagai XHTML. Karena ini data, bukan markup, saya ingin menjaganya tetap bersih - tidak ada tambahan <div>s atau <span>s. Namun, sebagai kemudahan bagi pengembang, saya juga ingin membuat data yang dikembalikan cukup dapat dibaca di browser. Untuk melakukannya, saya memikirkan cara yang baik untuk melakukannya adalah dengan menggunakan CSS. 

Hal khusus yang ingin saya lakukan adalah memasukkan linebreak di tempat-tempat tertentu. Saya mengetahui tampilan: blok, tetapi tidak benar-benar berfungsi dalam situasi yang saya coba tangani sekarang - formulir dengan bidang <input>. Sesuatu seperti ini: 

<form>
  Thingy 1: <input class="a" type="text" name="one" />
  Thingy 2: <input class="a" type="text" name="two" />
  Thingy 3: <input class="b" type="checkbox" name="three" />
  Thingy 4: <input class="b" type="checkbox" name="four" />
</form>

Saya ingin merender sehingga setiap label ditampilkan pada baris yang sama dengan bidang input yang sesuai. Saya sudah mencoba ini: 

input.a:after { content: "\a" }

Tapi itu sepertinya tidak melakukan apa-apa. 

38
Craig Andera

Akan lebih baik untuk membungkus semua elemen Anda di elemen label, lalu menerapkan css ke label. Kelas: sebelum dan: setelah pseudo tidak sepenuhnya didukung secara konsisten.

Tag label memiliki banyak keuntungan termasuk peningkatan aksesibilitas (pada berbagai tingkatan) dan banyak lagi.

<label>
    Thingy one: <input type="text" name="one">;
</label>

lalu gunakan CSS pada elemen label Anda ...

label {display:block;clear:both;}
54
BrewinBombers

Kontrol formulir diperlakukan secara khusus oleh browser, jadi banyak hal tidak selalu berfungsi sebagaimana mestinya. Salah satunya adalah konten yang dihasilkan - tidak berfungsi untuk kontrol formulir. Sebagai gantinya, bungkus label dalam <label> dan gunakan label:before { content: '\a' ; white-space: pre; }. Anda juga dapat melakukannya dengan melayang semuanya dan menambahkan clear: left ke elemen <label>.

41
Jim

Sepertinya Anda memiliki banyak item formulir yang ingin Anda tampilkan dalam daftar, bukan? Hmm ... kalau saja orang-orang HTML spec itu berpikir untuk menyertakan markup untuk menangani daftar item ...

Saya sarankan Anda mengaturnya seperti ini:

<form>
  <ul>
    <li><label>Thingy 1:</label><input class="a" type="text" name="one" /></li>
    <li><label>Thingy 1:</label><input class="a" type="text" name="one" /></li>
 </ul>
</form>

Maka CSS menjadi jauh lebih mudah.

12
Jon Galloway

berikut ini akan memberi Anda baris baru. Ini juga akan menempatkan ruang ekstra di depan ... Anda harus mengacaukan lekukan sumber Anda dengan menghapus tab.

form { white-space: pre }
4
Jimmy
<form>
   <label>Thingy 1: <input class="a" type="text" name="one" /></label>
   <label>Thingy 2: <input class="a" type="text" name="two" /></label>
   <label>Thingy 3: <input class="b" type="checkbox" name="three" /></label>
   <label>Thingy 4: <input class="b" type="checkbox" name="four" /></label>
</form>

dan css berikut

form label { display: block; }
2
daniels
<style type="text/css">
label, input { float: left; }
label { clear:left; }
</style>

<form>
    <label>thing 1:</label><input />
    <label>thing 2:</label><input />
</form>
2
Galen

Salah satu opsi adalah untuk menentukan templat XSLT dalam XML Anda yang (beberapa) browser akan proses memungkinkan Anda untuk memasukkan presentasi dengan mark-up, CSS, warna dll.

Setelah di XHTML Anda bisa menambahkan beberapa padding di sekitar elemen dengan CSS, mis.

form input.a {margin-bottom: 1em}

2
DamienG

Rahasianya adalah mengelilingi seluruh thingie, label, dan widget Anda, dalam rentang yang kelasnya menghalangi dan menghapus:

<style type="text/css">
.lb {
display:block;clear:both;
}
</style>

<form>
<span class="lb">Thingy 1: <input class="a" type="text" name="one" /></span>
<span class="lb">Thingy 2: <input class="a" type="text" name="two" /></span>
<span class="lb">Thingy 3: <input class="b" type="checkbox" name="three" /></span>
<span class="lb">Thingy 4: <input class="b" type="checkbox" name="four" /></span>
</form>
1
D-n Russler

Opsi javascript semuanya rumit. Lakukan seperti yang disarankan Jon Galloway atau daniels0xff.

0
lordscarlet

Saya setuju dengan John Millikin. Anda dapat menambahkan tag <span> atau sesuatu di sekitar setiap baris dengan kelas CSS yang ditentukan, kemudian membuatnya ditampilkan: blokir jika perlu. Satu-satunya cara lain yang bisa saya pikirkan untuk melakukan ini adalah membuat <input> menjadi inline-block dan membuatnya memancarkan padding-kanan "sangat besar", yang akan membuat konten inline dibungkus.

Meski begitu, taruhan terbaik Anda adalah mengelompokkan data secara logis ke dalam tag <span> (atau yang serupa) untuk menunjukkan bahwa data tersebut adalah milik bersama (dan kemudian biarkan CSS melakukan penentuan posisi).

0
Thunder3

Elemen yang jelas CSS mungkin adalah apa yang Anda cari untuk mendapatkan linebreak .

Input form #login { jelas: keduanya; }

akan memastikan tidak ada elemen apung lainnya yang tersisa di kedua sisi bidang input Anda.

Referensi

0
Leo Utskot