如何在Semantic UI中指定链接项的URL?

时间:2015-11-15 18:05:26

标签: semantic-ui

当使用以<div class="ui divided link items">开头的“链接项目”时,在语义UI中(根据手册:http://semantic-ui.com/views/item.html),我应该在哪里指定我希望项目的页面的URL链接到?

我尝试将整个<div class="item">包裹在<a>中,但这样做会破坏项目的格式,使内容显示在图片下方。

1 个答案:

答案 0 :(得分:1)

您可以将div.item与此fiddle或下面的HTML中的a.item一起提交:

<div class="ui divided link items">
  <a class="item" href="http://www.google.com" target="_blank">
    <div class="ui tiny image">
      <img src="http://www.semantic-ui.com/images/avatar/large/stevie.jpg">
    </div>
    <div class="content">
      <div class="header">Google</div>
      <div class="description">
        <p></p>
      </div>
    </div>
  </a>
  <a class="item" href="http://www.yahoo.com" target="_blank">
    <div class="ui tiny image">
      <img src="http://www.semantic-ui.com/images/avatar/large/veronika.jpg">
    </div>
    <div class="content">
      <div class="header">Yahoo!</div>
      <div class="description">
        <p></p>
      </div>
    </div>
  </a>
  <a class="item" href="http://duckduckgo.com/" target="_blank">
    <div class="ui tiny image">
      <img src="http://www.semantic-ui.com/images/avatar/large/jenny.jpg">
    </div>
    <div class="content">
      <div class="header">DuckDuckGo</div>
      <div class="description">
        <p></p>
      </div>
    </div>
  </a>
</div>