web-dev-qa-db-ja.com

CSSを使用してHTMLドキュメントに改行を挿入する方法

私はWebサービスを書いていますが、データをXHTMLとして返したいです。マークアップではなくデータなので、非常にきれいに保ちたい-余分な<div>sまたは<span>s。ただし、開発者の便宜を図るため、返されたデータをブラウザで合理的に読みやすくしたいと思います。そのためには、CSSを使用することをお勧めします。

私が特にやりたいのは、特定の場所に改行を挿入することです。 display：blockは知っていますが、現在処理しようとしている状況（<input>フィールドがあるフォーム）では実際には機能しません。このようなもの：

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

各ラベルが対応する入力フィールドと同じ行に表示されるようにレンダリングしたいと思います。私はこれを試しました：

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

しかし、それは何もしないようでした。

htmlcss
38
Craig Andera

すべての要素をラベル要素でラップしてから、CSSをラベルに適用するのが最善です。 ：beforeおよび：after疑似クラスは、一貫した方法で完全にはサポートされていません。

ラベルタグには、（複数レベルでの）アクセシビリティの向上など、多くの利点があります。

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

次に、ラベル要素でCSSを使用します...

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

フォームコントロールはブラウザによって特別に扱われるため、多くの機能が必ずしも正常に機能するとは限りません。これらの1つは生成されたコンテンツです-フォームコントロールでは機能しません。代わりに、ラベルを<label>でラップし、label:before { content: '\a' ; white-space: pre; }を使用します。また、すべてをフロートし、clear: leftを<label>要素に追加することでもできます。

41
Jim

リストに表示したいフォームアイテムがたくさんあるようですね。うーん...それらのHTML仕様の連中だけがアイテムのリストを処理するためのマークアップを含めると考えていたら...

次のように設定することをお勧めします。

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

そうすると、CSSがはるかに簡単になります。

12
Jon Galloway

以下は改行を提供します。また、前に余分なスペースを配置します...タブを削除して、ソースのインデントを台無しにする必要があります。

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>

そして、次の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

1つのオプションは、（一部の）ブラウザーが処理するXML内のXSLTテンプレートを指定して、マークアップ、CSS、色などのプレゼンテーションをWebサービスのコンシューマーに影響を与えないようにすることです。

XHTMLでは、CSSを使用して要素の周囲にいくつかのパディングを追加できます。

フォームinput.a {margin-bottom：1em}

2
DamienG

秘密は、ブロックとクリアを行うクラスのスパンで、モノ、ラベル、ウィジェット全体を囲むことです。

<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オプションは、すべてが複雑です。 Jon Gallowayまたはdaniels0xffが示唆したとおりに行います。

0
lordscarlet

私はジョン・ミリキンに同意します。 CSSクラスが定義された<span>タグまたは各行の周囲に何かを追加し、必要に応じてdisplay：blockにすることができます。私がこれを行うと考えることができる他の唯一の方法は、<input>をインラインブロックにし、インラインコンテンツをラップダウンさせる「非常に大きな」パディングを右に出すことです。

それでも、あなたの最善の策は、データを論理的に<span>タグ（または同様のもの）にグループ化して、そのデータが一緒に属していることを示すことです（そして、CSSに配置させます）。

0
Thunder3

CSSのclear要素は、おそらくgetの改行を探しているものです。何かに沿って：

#login form input {clear：both; }

入力フィールドの両側に他のフローティング要素が残らないようにします。

参照

0
Leo Utskot