it-swarm-tr.com

CSS kullanarak HTML belgelerine satır sonları nasıl eklenir

Bir web servisi yazıyorum ve verileri XHTML olarak döndürmek istiyorum. Verileri olduğundan, biçimlendirme değil, çok temiz tutmak istiyorum - fazladan <div>s veya <span>s yok. Bununla birlikte, geliştiricilere kolaylık sağlamak için, döndürülen verileri bir tarayıcıda makul şekilde okunabilir hale getirmek istiyorum. Bunu yapmak için, CSS kullanmak olacağını düşünmenin iyi bir yol olduğunu düşünüyorum. 

Özel olarak yapmak istediğim şey, belirli yerlere çizgiler eklemek. Ekranın farkındayım: blok, ancak şu anda işlemeye çalıştığım durumda gerçekten çalışmıyor - <input> alanlarını içeren bir form. Bunun gibi bir şey: 

<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>

Her etiketin karşılık gelen giriş alanıyla aynı satırda gösterilmesi için oluşturulmasını istiyorum. Bunu denedim: 

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

Ama bu hiçbir şey yapmıyor gibiydi. 

38
Craig Andera

Tüm elemanlarınızı etiket elemanlarına sarmak ve etiketlere css uygulamak en iyisidir. : Before ve: after sözde sınıfları tutarlı bir şekilde tam olarak desteklenmiyor.

Etiket etiketlerinin, erişilebilirliği arttırma (birden çok düzeyde) ve daha fazlasını içeren birçok avantajı vardır.

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

daha sonra etiket öğelerinizde CSS kullanın ...

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

Form kontrolleri tarayıcılar tarafından özel olarak ele alınır, bu nedenle birçok şey mutlaka olması gerektiği gibi çalışmaz. Bunlardan biri içerik üretildi - form kontrolleri için çalışmıyor. Bunun yerine, etiketleri <label> içine sarın ve label:before { content: '\a' ; white-space: pre; } öğesini kullanın. Ayrıca, her şeyi yüzerek ve clear: left öğelerine <label> ekleyerek de yapabilirsiniz.

41
Jim

Listede göstermek istediğiniz bir sürü form öğeniz var gibi gözüküyor, değil mi? Hmm ... eğer sadece bu HTML uzmanları bir öğe listesini işlemek için işaretlemeyi dahil etmeyi düşünmüşlerse ...

Böyle ayarlamanızı tavsiye ederim:

<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>

Sonra CSS çok kolaylaşıyor.

12
Jon Galloway

aşağıdakiler size yeni hatları verecektir. Ayrıca, sekmeyi kaldırarak ... kaynak girintinizi bozmanız gerekmesine rağmen, önüne fazladan boşluk koyar.

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>

ve aşağıdaki css

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

Bir seçenek, XML'inizde (bazı) tarayıcıların, web hizmetinin tüketicilerini etkilememesi gereken işaretleme, CSS, renkler vb.

XHTML'ye girdikten sonra, basitçe CSS'li elementlerin etrafına biraz dolgu maddesi ekleyebilirsiniz, örn.

form input.a {kenar boşluğu: 1em}

2
DamienG

İşin sırrı, tüm öğenizi, etiketinizi ve widget'ınızı sınıfını engelleyen bir açıklıkta çevreleyen ve açık olan:

<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

Javascript seçenekleri her şeyi karmaşıklaştırıyor. Jon Galloway ya da daniels0xff'in önerdiği gibi yapın.

0
lordscarlet

John Millikin ile aynı fikirdeyim. Tanımlanmış bir CSS sınıfı ile <span> etiketlerini veya her satırın etrafına bir şey ekleyebilir, sonra bunların görüntülenmesini sağlayabilirsiniz: gerekirse blok. Bunu yapmayı düşünebilmemin tek yolu, <input> işlevini bir satır içi blok yapmak ve satır içi içeriğin bozulmasına neden olacak şekilde "çok büyük" dolguyu sağ yapmalarını sağlamaktır.

Buna rağmen, en iyi seçeneğiniz, verilerin bir araya geldiğini belirtmek için <span> etiketlerinde (veya benzeri) mantıksal olarak gruplandırmaktır (ve ardından CSS'nin konumlandırmayı yapmasına izin verin).

0
Thunder3

CSS temizle elementi muhtemelen get line çizgileri için aradığınız şeydir .

#login form girişi { ikisini de temizle; }

başka hiçbir değişken elemanın giriş alanlarınızın iki tarafına da bırakılmadığından emin olun.

Referans

0
Leo Utskot