をHTMLで使用しないで改行してください

Question

私はこれらの要素のそれぞれを異なる行にしたい、<br />をHTMLに使用しないで、<h1>はブロック要素ですが、そのwidthを修正する必要があります。アンカーを<h1>の下に置かないようにするにはどうすればよいですか？

Answer 1

スタートh1からfloat: leftを削除することもできます。

次にルールを追加します。

a.view-options { 
    display: block; 
} 

Answer 2

http://jsfiddle.net/mmhhd/は、アンカータグが同様の要素をブロックしてください：

<h1 id="viewerTitle">Header </h1> 
<a href="#" class="view-options">View options</a> 
<a href="#" class="view-options">View options</a> 

は、ここでの例です。アンカーリンクタグブロックを作るために

Answer 3

使用CSS：

a.view-options { display: block; } 

Answer 4

使用CSS：

a { 
    display: block; 
} 

デフォルトaタグでは、インライン要素であるので、あなたは、その表示プロパティを変更する必要があります。

CSS仕様から：

ブロックレベル要素は、ブロック（例えば段落）として視覚的にフォーマットされたソース文書のそれらの要素です。次の 'display'プロパティの値は、要素をブロックレベルにします： 'block'、 'list-item'、 'table'。

http://www.w3.org/TR/CSS2/visuren.html#block-boxes

インラインレベル要素

は、コンテンツの新しいブロックを形成しないことをソース文書のそれらの要素です。コンテンツは、行 （例えば、段落内の強調されたテキスト部分、インライン画像、 など）に分布している。次の 'display'プロパティの値は、インラインレベルの要素 ''を作成します。 'inline'、 'inline-table'、 'inline-block'です。 インラインレベルの要素は、インラインレベルのボックスを生成します。インラインレベルのボックスは、インラインの書式設定コンテキストに参加するボックス です。

http://www.w3.org/TR/CSS2/visuren.html#inline-boxes

Answer 5

は、H1タグから浮上し、タグの表示を行います：display: block;

Answer 6

代替方法を：

a.view-options

で h1で float:left;と display: inline-block;を削除します

次に、

を追加します。

h1:after, a:after { 
    content:"\a"; 
    white-space: pre; 
} 

これは私の作品の方法ですhttp://jsfiddle.net/8my6q/

Answer 7

を参照してください。