Html div圆圈内的可单击链接_Html_Css

Html div圆圈内的可单击链接

html css

Html div圆圈内的可单击链接,html,css,Html,Css,我对使用HTML和CSS非常陌生；寻找手工艺四色圈内的一些文字将链接到一个网站。目前正在使用以下工具： <div id="first" class="circle"></div> <button onclick="href="https://taikoinitiative.com>Test One</button> <div id="second" class=

我对使用HTML和CSS非常陌生；寻找手工艺四色圈内的一些文字将链接到一个网站。目前正在使用以下工具：

<div id="first" class="circle"></div>
<button onclick="href="https://taikoinitiative.com>Test One</button>

<div id="second" class="circle"></div>

<button onclick="href="https://taikoinitiative.com>Test Two</button>

<div id="third" class="circle"></div>

<button onclick="href="https://taikoinitiative.com>Test Three</button>

<div id="fourth" class="circle"></div>
<button onclick="href="https://taikoinitiative.com>Test Four</button>

我很难让文本链接符合圆圈的内部。任何指点都将不胜感激

最好的办法是将div转换为锚定标记。所以它看起来像这样：

<a id="first" href="https://taikoinitiative.com" class="circle"></a>

<a href="https://taikoinitiative.com" id="second" class="circle"></a>

<a href="https://taikoinitiative.com" id="third" class="circle"></a>

<a href="https://taikoinitiative.com" id="fourth" class="circle"></a>

这将给您一个圆圈，单击该圆圈时，将带您进入提供的链接

所有

元素应位于各自的

元素内。试试这个html代码

<div id="first" class="circle">
<button onclick="href="https://taikoinitiative.com>Test One</button>
</div>

<div id="second" class="circle">
<button onclick="href="https://taikoinitiative.com>Test Two</button>
</div>

<div id="third" class="circle">
<button onclick="href="https://taikoinitiative.com>Test Three</button>
</div>

<div id="fourth" class="circle">
<button onclick="href="https://taikoinitiative.com>Test Four</button>
</div>

其他人也一样。

使用以下语法：

<html>
  <body>
     <a href="Your link" class="class name">Button Name</a>
     <a href="Your link" class="class name">Button Name</a>
     <a href="Your link" class="class name">Button Name</a>
     <a href="Your link" class="class name">Button Name</a>
  </body>
<html>

据我所知，您正在尝试放置4个圆圈，这些圆圈将链接到某些页面。对于链接页面，我们使用链接到新页面或网站的锚定


可单击元素应该是
元素，而不是元素。验证您的代码，使用HREF和ONCLICK的格式不正确。请检查您的代码。您的ONCLICK和HREFs不正确。
#first {position: absolute;}

<html>
  <body>
     <a href="Your link" class="class name">Button Name</a>
     <a href="Your link" class="class name">Button Name</a>
     <a href="Your link" class="class name">Button Name</a>
     <a href="Your link" class="class name">Button Name</a>
  </body>
<html>

<div id="first" class="circle">
    <a href="https://taikoinitiative.com">Test One</a>
</div>

<div id="second" class="circle">
    <a href="https://taikoinitiative.com">Test Two</a>
</div>

<div id="third" class="circle">
    <a href="https://taikoinitiative.com">Test Three</a>
</div>

<div id="fourth" class="circle">
    <a href="https://taikoinitiative.com">Test Four</a>
</div>

a, a:visited, a:link{
  text-decoration: none;
  color: white;
}

.circle{
  padding: 1rem;
  width: max-content;
  border-radius: 50%;
  border: solid thin #ccc;
}

#first{
  background-color: blue;
}

#second{
  background-color: red;
}

#third{
  background-color: orange;
}

#fourth{
  background-color: green;
}