0

HTML：

<a href="#">
    <div class="round">
        <img src="favicon.png" align="center" /><br />Power and Electricity
    </div>
</a>
<a href="#">
    <div class="round">
        <img src="favicon.png" align="center" /><br />Power and Electricity
    </div>
</a>
<a href="#">
    <div class="round">
        <img src="favicon.png" align="center" /><br />Power and Electricity
    </div>
</a>
<a href="#">
    <div class="round">
        <img src="favicon.png" align="center" /><br />Power and Electricity
    </div>
</a>

CSS：

.round{
    -moz-border-radius:50%;  /* for Firefox */
    -webkit-border-radius:50%; /* for Webkit-Browsers */
    border-radius:50%; /* regular */
    opacity:1; /* Transparent Background 50% */
    background:#eee;
    padding:40px;
    height:70px;
    width:70px;
    text-align: center;
    alignment-adjust: middle;
    vertical-align:middle;
    text-decoration: none;
    color:#000;
}
.round:hover{
    -moz-border-radius:50%;  /* for Firefox */
    -webkit-border-radius:50%; /* for Webkit-Browsers */
    border-radius:50%; /* regular */
    opacity:1; /* Transparent Background 50% */
    background:#000;
    padding:40px;
    height:70px;
    width:70px;
    text-align: center;
    alignment-adjust: middle;
    vertical-align:middle;
    text-decoration: none;
    color:#fff;
}

并提出我的问题：

  1. 为什么文字装饰不起作用？
  2. 文字在悬停时会改变颜色，但不会改变下划线！为什么？
  3. 所有的div一个接一个地垂直出现。我如何将它水平放置在屏幕上并自动将其置于屏幕末尾的第二行？
  4. 这是最佳做法吗？这不适用于哪些浏览器？我尝试了所有最新版本的 safari、chrome 和 firefox。不确定它是否适用于IE8
4

5 回答 5

0

a:hover 覆盖 div:hover，您应该为 a 创建一个单独的类并为其定义text-decoration:none。对齐问题可能来自同一个问题，外部标签是 a 所以你应该为它定义 css。

于 2013-09-27T14:05:54.780 回答
0

将颜色属性放在锚元素上。而且您不必为 :hover 或任何其他所谓的伪类重新声明相同的 CSS 属性。一个好的经验法则是尽可能少地使用 HTML 元素并保持语义。不适用于IE8。

HTML

<a href="#" class="round">Power and Electricity</a> 
<a href="#" class="round">Power and Electricity</a> 
<a href="#" class="round">Power and Electricity</a> 
<a href="#" class="round">Power and Electricity</a>

CSS

.round {
  color: #000;
  display: inline-block;
  -moz-border-radius:50%;  /* for Firefox */
  -webkit-border-radius:50%; /* for Webkit-Browsers */
  border-radius:50%; /* regular */
  opacity:1; /* Transparent Background 50% */
  background:#eee;
  padding:40px;
  height:70px;
  width:70px;
  text-align: center;
}
.round:hover{
  color: #fff;
  background:#000;
}

http://jsfiddle.net/jbWPX/7/

于 2013-09-27T14:11:48.603 回答
0

而不是在 . 中包含一个div，a只需将round类放在a. 上：

<a class="round" href="#"><img src="favicon.png" align="center" /><br />Power and Electricity</a>

然后添加.round{display:inline-block;}，一切就绪。

http://jsfiddle.net/FRz3H/

于 2013-09-27T14:14:22.517 回答
0

尝试将类分配给锚标记而不是 div，或者创建一个新类并将其分配给 text-decoration: none 的锚标记

例子：

<a href="#" class="roundHyperlink"><div class="round"><img src="favicon.png" align="center"><br />Power and Electricity</div></a> 

.roundHyperlink
{
   text-decoration:none;
}

希望对你有帮助...

于 2013-09-27T14:16:47.293 回答
0

丢失 div 并将锚点显示为块，然后回答您的问题 1&2：要回答 3，请向左添加一个浮点数。

HTML：

<a class="round" href="#">
    <img src="favicon.png" align="center" /><br />Power and Electricity
</a>

CSS：

.round{
    display: block;
    float: left;
    .....
}

还要检查这个演示。

于 2013-09-27T14:18:11.553 回答