Question

I have a project where I want to change some circle elements into hyperlinks by wrapping them in an <a href>. The problem is, I lose the styling that I had previously applied after I wrap the html div in the <a> tag. I am having trouble finding a solution after adding the <a> tag in the css.

Here is a Codepen I have created of a draft project. Try wrapping a .circle div in an <a> tag:

CodePen

包裹时，Div会丢失所有样式

如果CodePen已关闭

＆＃13;

.wrapper {
  width: 100%;
}
.wrapper .first {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: row wrap;
  max-width: 1222px;
}
.wrapper .first .circle {
  width: 100px;
  height: 100px;
  overflow: hidden;
  text-align: center;
  margin-right: 20px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FF9E9D;
  border-radius: 50%;
  border-style: solid;
  border-color: #FF9E9D;
  transition: all 0.4s ease-in-out;
}

＆＃13;

<div class="wrapper">
  <div class="first">
    <div class="circle">
      <h5>MD</h5>
    </div>
  </div>
</div>

＆＃13;

谢谢，非常感谢任何帮助。

Answer 1

当我在那个代码笔中使用它时，它工作正常

<a href="#"><div class="circle"><h5>MD</h5></div></a>
    <a href="#"><div class="circle"><h5>MD</h5></div></a>
    <a href="#"><div class="circle"><h5>MD</h5></div></a>    
    <a href="#"><div class="circle"><h5>MD</h5></div></a>
    <a href="#"><div class="circle"><h5>MD</h5></div></a>

这就是我所做的

或

<div class="circle"><a href="#"><h5>MD</h5></a></div>

也很好看

Answer 2

因为你希望整个div成为一个链接，为什么不给一个标签一个那种风格的类。例如

＆＃13;

<a class="first" href="your link"></a>

＆＃13;

＆＃13; 请注意＆＃34; .first＆＃34;可以是您想要链接的任何课程，也可以是您希望用户点击该链接

在<a> tag

2 个答案: