it-swarm-eu.dev

Jak vkládat konce řádků do HTML dokumentů pomocí CSS

Píšu webovou službu a chci data vrátit jako XHTML. Protože to jsou data, ne značení, chci to udržet velmi čisté - žádné další <div>s nebo <span>s. Nicméně, jako pohodlí pro vývojáře, také bych rád, aby se vrácená data rozumně čitelná v prohlížeči. K tomu, myslím, že dobrý způsob, jak jít o to by bylo použití CSS. 

Konkrétně chci udělat, je vložit řádky na určitých místech. Jsem si vědoma zobrazení: bloku, ale ve skutečnosti to nefunguje v situaci, kterou se snažím zvládnout teď - formulář s poli <input>. Něco takového: 

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

Chtěl bych, aby se vykreslil tak, aby se každý štítek zobrazoval na stejném řádku jako odpovídající vstupní pole. Zkusil jsem to: 

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

Ale zdálo se, že to nic neudělá. 

38
Craig Andera

Nejlepší by bylo zabalit všechny prvky do prvků štítků a pak použít štítky s css. Pseudo třídy před a po nejsou konzistentně podporovány.

Štítky štítků mají mnoho výhod, včetně zvýšené dostupnosti (na více úrovních) a více.

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

pak použijte CSS na elementech štítku ...

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

Ovládací prvky formuláře jsou zpracovány speciálně prohlížeči, takže mnoho věcí nemusí nutně fungovat tak, jak by měly. Jednou z těchto věcí je generovaný obsah - nefunguje pro ovládací prvky formuláře. Místo toho zabalte popisky v <label> a použijte label:before { content: '\a' ; white-space: pre; }. Můžete to také provést plovoucím a přidáním clear: left do elementů <label>.

41
Jim

Vypadá to, že máte spoustu položek, které byste chtěli ukázat v seznamu, že? Hmm ... kdyby si mysleli, že tito chlapci, kteří se specializují na HTML specifikace, by zahrnovali i značek, aby zvládli seznam položek ...

Doporučuji vám nastavit to takto:

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

Pak se CSS dostane mnohem jednodušší.

12
Jon Galloway

následující by vám dal nové řádky. To by také dát extra prostor v přední ačkoli ... budete muset pokazit svůj zdroj odsazení odstraněním tabbing.

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>

a následující 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

Jednou z možností je určit šablonu XSLT v rámci XML, kterou (některé) prohlížeče budou zpracovávat, což vám umožní zahrnout prezentaci se značkami, CSS, barvami atd., Které by neměly mít vliv na spotřebitele webové služby.

Jednou v XHTML můžete jednoduše přidat nějaké polstrování kolem prvků s CSS, např.

formulář input.a {margin-bottom: 1em}

2
DamienG

Tajemství je obklopit celou věc, štítek a widget, v rozpětí, jehož třída dělá blok a jasné:

<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

Možnosti javascriptu jsou o něco složitější. Udělejte to, co navrhl Jon Galloway nebo daniels0xff.

0
lordscarlet

Souhlasím s Johnem Millikinem. Můžete přidat tagy <span> nebo něco kolem každé řádky s definovanou třídou CSS a poté je zobrazit: blokovat v případě potřeby. Jediný jiný způsob, jak si to můžu myslet, je udělat z bloku <input> in-line blok a učinit je tak, aby vyzařovaly „velmi velké“ padding-right, což by způsobilo, že se vložený obsah zalomí.

Nejlepším řešením je proto logicky seskupit data do tagů <span> (nebo podobných) a označit tak, že tato data náležejí dohromady (a pak nechat CSS provést umístění).

0
Thunder3

Jasný prvek CSS je pravděpodobně to, co hledáte, aby se vám dostaly zlomky. Něco podél:

#login form input { clear: oba; }

ujistěte se, že žádné další plovoucí prvky nejsou ponechány na obou stranách vstupních polí.

Reference

0
Leo Utskot