html - 链接整个 DIV

标签 html css

我想链接“元素属性”DIV。如果需要,我可以编辑 HTML 和 CSS,但我不知道如何让它工作。

.item-attributes {
  display: table;
  width: 100%;
  height: 50px;
}

.item-attributes__item {
  display: table-cell;
  padding: 5px;
  text-align: center;
  vertical-align: middle;
}

.item-attributes__link i {
  margin: 0;
  margin-top: 0px;
  position: absolute;
  top: 50%;
  right: 0;
  vertical-align: middle;
}
<div class="item-attributes">
  <div class="item-attributes__item">
    <a href="#" class="item-attributes__link">
      <i class="fa fa-long-arrow-right"></i>
    </a>
  </div>
</div>

最佳答案

另一种方法是将 .item-attributes__item 作为您的链接。

.item-attributes {
  display: table;
  width: 100%;
  height: 50px;
}

.item-attributes__link {
  display: table-cell;
  padding: 5px;
  text-align: center;
  vertical-align: middle;
  background-color: #dfd;

}

.item-attributes__link i {
  margin: 0;
  margin-top: 0px;
  position: absolute;
  top: 50%;
  right: 0;
  vertical-align: middle;
}
<div class="item-attributes">
    <a href="#" class="item-attributes__link">
      <i class="fa fa-long-arrow-right">Item</i>
    </a>
</div>

关于html - 链接整个 DIV,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53836704/

相关文章:

用于缩放的 960 网格布局上图像的 HTML5 CSS 过渡

javascript - 使用 datatable.js 的具有固定标题和固定列的数据表

html - 他们在横幅和标题中使用什么过渡?

html - CSS 相对位置 : width not considered

CSS 媒体查询 - 宽度规则不适用

c# - 如何修改使用asp :Content to css-page?的asp.net页面的样式

php - 如何让 ajax 评论系统从不同的目录工作?

javascript - HTML DOM 和 jQuery DOM 在一行简单的代码中?

html - 文本框中间的光标?

jquery - 无法专注于标签