2

私はWebアプリケーションに取り組んでいます。そして、私たちが作成するのは、インライン編集とも言えるものです。私が解決しようとしていることを説明するために、Facebook の投稿の例を使用します。

いいねの投稿があります。

Steve Jobs さんが 5 枚の新しい写真を追加しました

Steve Jobs は彼のプロフィールにリダイレクトするリンクなので、HTML では次のようになります。

<div class="post-block">
   <p><a href="stevejobs/" title="#">Steve Jobs</a> added 5 new photos.<p>
</div>

しかし、私が望むのは、投稿の「ブロック」全体をクリック可能にすることですが、その名前だけがリンクのように見えるようにしたいのです。通常、HTML ロジックでは次のように言います。

<a href="stevejobs/" title="#"><div class="post-block">
   <p><a href="stevejobs/" title="#">Steve Jobs</a> added 5 new photos.<p>
</div></a>

しかし、これは意味的に正しくありません。HTML 4.01またはその他の標準をざっと見てみると、次のように書かれています。

A 要素で定義されたリンクとアンカーはネストできません。A 要素には、他の A 要素を含めることはできません。

javascriptを使用して「divアンカー」全体のdiv:hover状態を定義する以外に、意味的に正しいものを作成するにはどうすればよいですか?

4

6 に答える 6

3

JavaScript は必要ないので (こちらの方が簡単です)、別の方法を次に示します。

<div class="post-block">
   <p><a href="stevejobs/" title="#">Steve Jobs <span style="color:none; text-decoration:none;">added 5 new photos.</span></a></p>
</div>

他のスタイル効果を追加できます。などcursor: none;など、ご希望の効果に応じて。

于 2012-10-13T15:09:48.910 に答える
2

HTML: 

<div class="post-block">
 <p><a href="stevejobs/" title="#"><span class="author">Steve Jobs</span> <span class="posttext">added 5 new photos.</span></a> <p>
</div>

CSS:

.post-block { margin: 0px; } 
.post-block p { margin: 0px; } 
.post-block p a {display: inline-block; background-color: transparent; width: 100%; min-height: 100px; /* can be varied */ }
.post-block p span.author { display: inline-block; }
.post-block p span.posttext { display: inline-block; }
于 2012-11-20T05:19:12.647 に答える
1

HTML5 では、aブロックレベル要素として使用できます。

<div class="post-block">
   <a href="stevejobs/"><p>Steve Jobs added 5 new photos.<p></a>
</div>

ここで、CSS を使用してデフォルトのリンク スタイルを削除します ( .post-block a {text-decoration:none;})。

名前のリンク スタイルを取得するには、名前を要素で囲み、"name" のようなクラスを追加します。要素はここbで適切な選択になります (それ以外の場合は を使用span):

<div class="post-block">
   <a href="stevejobs/"><p><b class="name">Steve Jobs</b> added 5 new photos.<p></a>
</div>

スタイリングを元に戻すには: .post-block .name {text-decoration:underline;}.

必要に応じて、名前を要素で囲むと、マイクロフォーマット hCard を使用することもできます。

于 2012-10-13T15:33:38.630 に答える
0

2 番目の例の「Steve Jobs」の周りのアンカー タグをスパンに置き換えて、必要に応じてスタイルを設定するだけです。

<a href="stevejobs/" title="#"><div class="post-block">
    <p><span class="post-block-user">Steve Jobs</span> added 5 new photos.<p>
</div></a>

CSSで：

a {
    cursor: default;
}
.post-block-user {
    font-weight: bold;
    cursor: pointer;
}

または、適用するか適用しないかを検討しているスタイル。実際には、その構造を維持する他の理由がない限り、div を失い、クラスをアンカー タグに配置しようとします。

于 2012-10-13T15:15:44.603 に答える