主页 / 问题 / 557292
Accepted
IC_
Asked:2020-08-20 01:18:32 +0000 UTC2020-08-20 01:18:32 +0000 UTC

引导程序。如何制作复杂的 li 元素

  • 772

我想制作一个链接列表，以便列表的某些行具有一个或多个链接。

假设我的 link1 没有指向 github 的链接，列表的第二行有一个下载链接和一个指向 github 上源代码的链接。这样两个链接都具有相同的块宽度

我怎样才能创建一个类github，以便我可以轻松地将它添加到其他链接中。

试过这样的：

HTML:

<ul class="example_view">
    <li>
        <div class="row">
            <div class="col-md-11">
                <a href="foo.rar">Foo binary link</a>
            </div>
            <div class="col-md-1 github">
                <a href="my_github_link.html">
            </div>
        </div>
    </li>
</ul>

CSS：

.github {
    background: url('../images/github.svg') no-repeat;
    background-size: contain;
    padding: 3% 3% 3% auto;
}

.example_view li {
    padding: 3% 2%;
    margin: 0 0 3px 0;
    background: #ddbdff;
    font-size: 2vmin;
}

但是 Gihabov 的身高col变得等于0.989583px

有没有更简单更精致的方法呢？无需硬编码

html

1 个回答

  1. Best Answer

    是的，还有更简洁的方法。图标链接（如果存在）将添加到li > .pull-right > a，而主链接通常放在li > a.

    <ul class="list-unstyled">
  <li>
    <div class="pull-right">
      <a href="my_github_link.html" class="icon icon-github"></a>
    </div>
    <a href="foo.rar">Foo binary link</a>
  </li>
</ul>

    我使用引导程序类.list-unstyled生成了一个列表，左侧没有标记和填充。我为li这个列表的元素设计了样式，就像你所做的那样.example_view li：

    .list-unstyled > li {
  background: #ddbdff;
  font-size: 2vmin;
  line-height: 4vmin;
  margin: 0 0 3px 0;
  padding: 3% 2%;
}

    .pull-right- 也是一个引导类，它将属性应用于块float: right，因此，块位于容器的最右侧，在我们的例子中，位于最右侧li。并且主链接会占用它所有可用的宽度，太长的链接会被转移到下一行：

    在此处输入图像描述

    您可以根据需要在块内放置任意数量的链接图标.pull-right- 它们将位于一行的最右侧li，彼此之间有一个小的缩进。

      <li>
    <div class="pull-right">
      <a href="my_github_link.html" class="icon icon-github"></a>
      <a href="my_github_link.html" class="icon icon-gitlab"></a>
    </div>
    <a href="foo.rar">Foo binary link</a>
  </li>

    样式负责图标之间的缩进：

    .icon + .icon {
  margin-left: 4px;
}

    在上面的示例中，您还可以看到图标链接的不同类别 -.icon-github和.icon-gitlab. 通过更改图标链接的这些类，您可以使用不同的图像。唯一的条件是图像必须是方形的，这样才不会违反比例。如果您的图标是矩形的，只需将其放入方形画布中并以这种方式保存即可。

    这些样式负责：

    .icon {
  background-size: cover;
  display: inline-block;
  height: 4vmin;
  width: 4vmin;
}
.icon-github {
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg');
}
.icon-gitlab {
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/1/18/GitLab_Logo.svg');
}

    注意图标的高度和宽度 - 它们等于主链接的前导 ( 4vmin)。这有助于使图标链接与文本的高度对齐（尽管这不是实现此目的的唯一方法）。

    同样background-size: contain在这里你不能再使用它，并且会做cover。

    如果您需要修复某些东西 - 请写在评论中。工作示例：https ://jsfiddle.net/gambala/Lnr4a4wp/

    • 3

相关问题