22

私は HTML に本当に慣れていないので、HTML を使用して複数のリンクを中央に配置する方法を知りたいと思っていました。

努力しています ：

  <a href="http//www.google.com"><p style="text-align:center">Search</a>

しかし、問題は、たとえばその背後に他のリンクを配置しようとしたときです。

 <a href="http//www.google.com"><p style="text-align:center">Search</a><a href="Contact Us"><p style="text-align:center">Contact Us</a></p>

それらを別々の行に配置するだけです。これは関数のせい<p>だと思います...しかし、私はHTMLしか知りません。CSSでできることは知っていますが、HTMLだけでできるかどうか疑問に思っていました。

助けてくれてありがとう！

4

8 に答える 8

36

あなたのコードにはいくつかの間違いがあります - 最初: あなたはあなたを閉じていませんp-tag:

<a href="http//www.google.com"><p style="text-align:center">Search</p></a>

next:pは「段落」を表し、ブロック要素です (したがって、改行が発生します)。そこに使用したいのは、span書式設定のためのインライン要素です。

<a href="http//www.google.com"><span style="text-align:center">Search</span></a>

ただし、リンクにスタイルを追加したいだけなら、そのリンクのスタイルを直接設定してみませんか?

<a href="http//www.google.com" style="text-align:center">Search</a>

最終的に、これは少なくとも正しいhtmlになりますが、その要素text-align:centerのテキストを中央に配置するため、必要なものとは正確には異なります。したがって、このリンクを含む要素に対してそれを設定する必要があります(このhtmlの部分はそうではありません)投稿されたので、あなたを修正することはできませんが、理解していただければ幸いです) - これを示すために、私は単純なものを使用します:div

<div style="text-align:center">    
  <a href="http//www.google.com">Search</a>
  <!-- more links here -->
</div>

編集：あなたの質問にいくつか追加：

  • pは「関数」ではありませんが、その通りです。これが問題を引き起こしています (ブロック要素であるため)
  • 使用しようとしているのはcss です。別のファイルに配置されるのではなく、単にインラインですが、ここでは「HTML のみ」を実行していません。
于 2010-11-29T09:37:17.580 に答える
4

リンクのリストがあるので、それらを (段落としてではなく) リストとしてマークアップする必要があります。

Listamatic には、リンクのリストのスタイルを設定する方法の例がたくさんあります。これには、各リンクが中央に配置された垂直リストである数値が含まれます (これが目的のようです)。また、原理を説明するチュートリアルもあります。

スタイリングのその部分は、本質的に「text-align: centerリンク テキストを含むブロックとして表示されている要素に設定する」(アンカー自体 (ブロックとして表示する場合) またはそれを含むリスト項目である可能性があります) に要約されます。

于 2010-11-29T10:05:54.087 に答える
3

<p>あなたはそれらを aまたは a の中に入れます<div>

<p style="text-align:center">
    <a href="http//www.google.com">Search</a> 
    <a href="Contact Us">Contact Us</a>
</p>

サンプル: http://jsfiddle.net/X8HM4/1/

于 2010-11-29T09:37:54.710 に答える
2

<p> は新しい行に表示されます。すべてのリンクを 1 つの <p> タグで囲んでみてください。

<p style="text-align:center;"><a href="http//www.google.com">Search</a><a href="Contact Us">Contact Us</a></p>
于 2010-11-29T09:38:13.433 に答える
0

<center>1 つの解決策は、次のようにそれらを 内に配置することです。

<center>
<a href="http//www.google.com">Search</a>
<a href="Contact Us">Contact Us</a>
</center>

jsfiddle も作成しました: https://jsfiddle.net/9acgLf8e/

于 2016-04-29T19:38:43.400 に答える
-3

nav要素で要素を実行してみてくださいul。私にはmain上記がありますが、必要ないと思います。

<main>
<nav>
<ul><li><a href="http//www.google.com">search</a>
<li><a href="http//www.google.com">search</a>
<li><a href="http//www.google.com">search</a>

コードはこのようなものです。
コードを挿入しても正しく機能しないため、空白を埋めて
中央に配置する必要があります。

main
nav
ul> li> a>: href="link of choice":name of link:/a>
于 2015-10-06T16:44:15.113 に答える