html - ボタンをインラインで形成できないのはなぜですか?

Question

文字列の横に btn が必要です。CSSインラインを使ってもわからない

ここに画像の説明を入力

 <span class="subscribe_button"> <h3>Books</h3> <%= render 'follow_form' %></span>

CSS:

.subscribe_button {
display: inline;
}

score 6 · Accepted Answer

ここに無効な HTML があります。

ブロックレベルの要素をインライン要素内に配置することはできません。これは HTML の基本的な知識です。

私がお勧めするのは、両方の要素を a でラップし、divfloat: left; を使用することです。

<div class="wrap">

<h3>Books</h3>
<span class="subscribe_button"> unsubscribe</span>

</div>

CSS:

.wrap
{
    width: 300px;
}

.wrap h3, 
.wrap span
{
    float: left;
}

.wrap span
{
    margin-left: 10px/*your value*/;
}

また、HTML ルール、どこで何が許可され、なぜ許可されているか、または許可されていないかについてもお読みになることをお勧めします。

score 1 · Accepted Answer

そのBooks部分は（また）ブロック（のため）であるため、同様<h1>に設定する必要があります（ limelightsのコメントに示されているように）。そうしないと、ボタンが次の行にプッシュされます。inline

score 1 · Accepted Answer

これをCSSに追加してみてください

.subscribe_button h3 {
    float: left;
}

要素をフロートする場合、それは同じ行に折り返される後の他の要素を意味します (それらの幅が幅を広げすぎない限り)。

score 0 · Accepted Answer

Span はインライン要素、h3 はブロック要素です。インライン要素はブロック要素内にある必要があります。HTMLコードを検証しようとしましたか? http://validator.w3.org/

試してください: 表示: インラインブロック;

score 0 · Accepted Answer

このコードでこれを行うことができると思います：

.subscribe_button > * {
  display: inline;
}

「>」は子セレクターで、* はすべての要素に一致します。

CSS2 セレクターの詳細については、CSS2 セレクターを参照してください。

score 0 · Accepted Answer

0

次のコードを試してください

.subscribe_button h3{
display: inline;
}

于 2013-01-18T10:27:40.850 に答える

score 0 · Accepted Answer

0

float:leftとの両方h3に使用button

于 2013-01-18T10:29:32.290 に答える

7 に答える 7