搜索
搜索

使标签的整个宽度可点击和响应

abudimir 发表于 Dev
13
拐

所以，我有一个带过滤器的画廊。我需要过滤器（作为标签完成）可以点击，就像目前第一个过滤器“全部”一样。问题是，正如您在调整窗口大小时所看到的那样，标签没有响应。填充以 rems 完成，但 div.filters 不包含其内部可点击性所需的标签填充。当您调整标签填充包含在红色边框内的窗口大小时，如何实现这一点？

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

 :root {
  --turquoise: rgb(56, 184, 201);
  --white: rgb(255, 255, 255);
  --poppyred: rgb(199, 74, 82);
}

ol,
li {
  list-style-type: none;
}


/* 5. FILTERS */

input[type="radio"] {
  display: none;
}

.filters {
  display: flex;
  justify-content: center;
  margin: 2rem 1rem;
  border: 1px solid red;
}

.filter-item {
  display: block;
  text-align: center;
  margin-bottom: .3rem;
  color: var(--white);
}

.filter-item label {
  text-align: center;
  background: var(--turquoise);
  cursor: pointer;
}

.filter-item label:hover {
  background: var(--poppyred);
}

[value="all"]:checked~.grid-gallery [data-category] {
  display: block;
}

[value="branding"]:checked~.grid-gallery .photo:not([data-category~="branding"]),
[value="graphical"]:checked~.grid-gallery .photo:not([data-category~="graphical"]),
[value="interior"]:checked~.grid-gallery .photo:not([data-category~="interior"]),
[value="illustrations"]:checked~.grid-gallery .photo:not([data-category~="illustrations"]),
[value="arts"]:checked~.grid-gallery .photo:not([data-category~="arts"]) {
  display: none;
}


/* Change color on click */

[value="all"]:checked~.filters [for="all"],
[value="branding"]:checked~.filters [for="branding"],
[value="graphical"]:checked~.filters [for="graphical"],
[value="interior"]:checked~.filters [for="interior"],
[value="illustrations"]:checked~.filters [for="illustrations"],
[value="arts"]:checked~.filters [for="arts"] {
  background: var(--poppyred);
}


/* 6. GALLERY */

.grid-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin: 1rem;
}

.photo img {
  height: 100%;
  width: 100%;
}


/*LABEL PADDING*/

.filter-items .filter-item:nth-child(1) label {
  padding: 0 57.8em;
}
<!-- Filters -->
<input type="radio" name="categories" id="all" value="all" checked>
<input type="radio" name="categories" id="branding" value="branding">
<input type="radio" name="categories" id="graphical" value="graphical">
<input type="radio" name="categories" id="interior" value="interior">
<input type="radio" name="categories" id="illustrations" value="illustrations">
<input type="radio" name="categories" id="arts" value="arts">

<div class="filters">
  <ol class="filter-items">
    <li class="filter-item"><label for="all">All</label></li>
    <li class="filter-item"><label for="branding">Branding</label></li>
    <li class="filter-item"><label for="graphical">Graphical Design</label></li>
    <li class="filter-item"><label for="interior">Interior Design</label></li>
    <li class="filter-item"><label for="illustrations">Illustrations</label></li>
    <li class="filter-item"><label for="arts">Arts</label></li>
  </ol>
</div>

<!-- Gallery -->
<div class="grid-gallery">

  <div class="photo" data-category="branding">
    <img src="https://i.picsum.photos/id/529/200/200.jpg?hmac=LiB-rmOEJ-iPyye6kU2u9mmHGs_o7w5wrCHbzlNX5b0" alt="">
  </div>

  <div class="photo" data-category="branding">
    <img src="https://i.picsum.photos/id/861/200/200.jpg?hmac=UJSK-tjn1gjzSmwHWZhjpaGahNSBDQWpMoNvg8Bxy8k" alt="">
  </div>

  <div class="photo" data-category="graphical">
    <img src="https://i.picsum.photos/id/529/200/200.jpg?hmac=LiB-rmOEJ-iPyye6kU2u9mmHGs_o7w5wrCHbzlNX5b0" alt="">
  </div>

  <div class="photo" data-category="arts">
    <img src="https://i.picsum.photos/id/861/200/200.jpg?hmac=UJSK-tjn1gjzSmwHWZhjpaGahNSBDQWpMoNvg8Bxy8k" alt="">
  </div>

  <div class="photo" data-category="arts">
    <img src="https://i.picsum.photos/id/529/200/200.jpg?hmac=LiB-rmOEJ-iPyye6kU2u9mmHGs_o7w5wrCHbzlNX5b0" alt="">
  </div>

  <div class="photo" data-category="interior">
    <img src="https://i.picsum.photos/id/861/200/200.jpg?hmac=UJSK-tjn1gjzSmwHWZhjpaGahNSBDQWpMoNvg8Bxy8k" alt="">
  </div>

  <div class="photo" data-category="graphical">
    <img src="https://i.picsum.photos/id/529/200/200.jpg?hmac=LiB-rmOEJ-iPyye6kU2u9mmHGs_o7w5wrCHbzlNX5b0" alt="">
  </div>

  <div class="photo" data-category="branding">
    <img src="https://i.picsum.photos/id/861/200/200.jpg?hmac=UJSK-tjn1gjzSmwHWZhjpaGahNSBDQWpMoNvg8Bxy8k" alt="">
  </div>

  <div class="photo" data-category="illustrations">
    <img src="https://i.picsum.photos/id/529/200/200.jpg?hmac=LiB-rmOEJ-iPyye6kU2u9mmHGs_o7w5wrCHbzlNX5b0" alt="">
  </div>

  <div class="photo" data-category="interior">
    <img src="https://i.picsum.photos/id/861/200/200.jpg?hmac=UJSK-tjn1gjzSmwHWZhjpaGahNSBDQWpMoNvg8Bxy8k" alt="">
  </div>

</div>

这是 Codepen：带有过滤器的 Codepen Gallery

他们离开了。S

你有一个奇怪的填充使“全部”变宽。我会删除它并display: block;在标签上使用。在下面的示例中，我做了一些其他更改，<div class="filter"></div>因为您不需要它，因此删除了它。将边距和边框移至<ol>自身。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

 :root {
  --turquoise: rgb(56, 184, 201);
  --white: rgb(255, 255, 255);
  --poppyred: rgb(199, 74, 82);
}

ol,
li {
  list-style-type: none;
}


/* 5. FILTERS */

input[type="radio"] {
  display: none;
}

.filter-items {
  margin: 2rem 1rem;
  border: 1px solid red;
}

.filter-item {
  text-align: center;
  margin-bottom: .3rem;
  color: var(--white);
}

.filter-item:last-child {
  margin-bottom: 0;
}

.filter-item label {
  display: block;
  text-align: center;
  background: var(--turquoise);
  cursor: pointer;
}

.filter-item label:hover {
  background: var(--poppyred);
}

[value="all"]:checked~.grid-gallery [data-category] {
  display: block;
}

[value="branding"]:checked~.grid-gallery .photo:not([data-category~="branding"]),
[value="graphical"]:checked~.grid-gallery .photo:not([data-category~="graphical"]),
[value="interior"]:checked~.grid-gallery .photo:not([data-category~="interior"]),
[value="illustrations"]:checked~.grid-gallery .photo:not([data-category~="illustrations"]),
[value="arts"]:checked~.grid-gallery .photo:not([data-category~="arts"]) {
  display: none;
}


/* Change color on click */

[value="all"]:checked~.filter-items [for="all"],
[value="branding"]:checked~.filter-items [for="branding"],
[value="graphical"]:checked~.filter-items [for="graphical"],
[value="interior"]:checked~.filter-items [for="interior"],
[value="illustrations"]:checked~.filter-items [for="illustrations"],
[value="arts"]:checked~.filter-items [for="arts"] {
  background: var(--poppyred);
}


/* 6. GALLERY */

.grid-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin: 1rem;
}

.photo img {
  height: 100%;
  width: 100%;
}


/*LABEL PADDING

.filter-items .filter-item:nth-child(1) label {
  padding: 0 57.8em;
}
*/
<!-- Filters -->
<input type="radio" name="categories" id="all" value="all" checked>
<input type="radio" name="categories" id="branding" value="branding">
<input type="radio" name="categories" id="graphical" value="graphical">
<input type="radio" name="categories" id="interior" value="interior">
<input type="radio" name="categories" id="illustrations" value="illustrations">
<input type="radio" name="categories" id="arts" value="arts">

<ol class="filter-items">
  <li class="filter-item"><label for="all">All</label></li>
  <li class="filter-item"><label for="branding">Branding</label></li>
  <li class="filter-item"><label for="graphical">Graphical Design</label></li>
  <li class="filter-item"><label for="interior">Interior Design</label></li>
  <li class="filter-item"><label for="illustrations">Illustrations</label></li>
  <li class="filter-item"><label for="arts">Arts</label></li>
</ol>

<!-- Gallery -->
<div class="grid-gallery">

  <div class="photo" data-category="branding">
    <img src="https://i.picsum.photos/id/529/200/200.jpg?hmac=LiB-rmOEJ-iPyye6kU2u9mmHGs_o7w5wrCHbzlNX5b0" alt="">
  </div>

  <div class="photo" data-category="branding">
    <img src="https://i.picsum.photos/id/861/200/200.jpg?hmac=UJSK-tjn1gjzSmwHWZhjpaGahNSBDQWpMoNvg8Bxy8k" alt="">
  </div>

  <div class="photo" data-category="graphical">
    <img src="https://i.picsum.photos/id/529/200/200.jpg?hmac=LiB-rmOEJ-iPyye6kU2u9mmHGs_o7w5wrCHbzlNX5b0" alt="">
  </div>

  <div class="photo" data-category="arts">
    <img src="https://i.picsum.photos/id/861/200/200.jpg?hmac=UJSK-tjn1gjzSmwHWZhjpaGahNSBDQWpMoNvg8Bxy8k" alt="">
  </div>

  <div class="photo" data-category="arts">
    <img src="https://i.picsum.photos/id/529/200/200.jpg?hmac=LiB-rmOEJ-iPyye6kU2u9mmHGs_o7w5wrCHbzlNX5b0" alt="">
  </div>

  <div class="photo" data-category="interior">
    <img src="https://i.picsum.photos/id/861/200/200.jpg?hmac=UJSK-tjn1gjzSmwHWZhjpaGahNSBDQWpMoNvg8Bxy8k" alt="">
  </div>

  <div class="photo" data-category="graphical">
    <img src="https://i.picsum.photos/id/529/200/200.jpg?hmac=LiB-rmOEJ-iPyye6kU2u9mmHGs_o7w5wrCHbzlNX5b0" alt="">
  </div>

  <div class="photo" data-category="branding">
    <img src="https://i.picsum.photos/id/861/200/200.jpg?hmac=UJSK-tjn1gjzSmwHWZhjpaGahNSBDQWpMoNvg8Bxy8k" alt="">
  </div>

  <div class="photo" data-category="illustrations">
    <img src="https://i.picsum.photos/id/529/200/200.jpg?hmac=LiB-rmOEJ-iPyye6kU2u9mmHGs_o7w5wrCHbzlNX5b0" alt="">
  </div>

  <div class="photo" data-category="interior">
    <img src="https://i.picsum.photos/id/861/200/200.jpg?hmac=UJSK-tjn1gjzSmwHWZhjpaGahNSBDQWpMoNvg8Bxy8k" alt="">
  </div>

</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何使整个链接标签区域可点击？

使整个div标签可点击，css html锚标签

使可点击的div标题重新排列以响应较小的宽度

使整个 gridLayoutWidget 可点击

标签中的可点击主题标签和用户

如何使标签可点击

如何创建带有可点击标签和可点击框而没有可点击“空白”的HTML复选框

如何使整个div可点击？

使整个DIV块可点击

如何使整个跨度可点击？

如何使整个div可点击

使我的整个<div>可点击

如何使整个背景可点击？

如何使整个div可点击

使整个ListView行可点击

使 <a> 内的整个 <div> 可点击

如何仅使图像可点击而不使整个div可点击？

如何使可点击区域应用于整个Div，而不仅仅是标签？

锚标签不可点击

电子邮件HTML模板-根据父<td>获取<a> </a>标签以采用完整的可点击宽度

在不同的“ span”标签中，但在一个“ p”标签下，为整个文本编写可点击的xpath

在 React 中使整个 Div 可点击

使整个 li / Action Link 可点击

使单选按钮的整个背景可点击

整个部分最终都可点击

如何使整个 HTML 日期字段可点击？

Android-使整个搜索栏可点击

使整个卡在Reactstrap中可点击

如何使整个Angular组件可点击

TOP 榜单

  1. 1

    蓝屏死机没有修复解决方案

  2. 2

    计算数据帧中每行的NA

  3. 3

    UITableView的项目向下滚动后更改颜色，然后快速备份

  4. 4

    Node.js中未捕获的异常错误，发生调用

  5. 5

    在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

  6. 6

    Linux的官方Adobe Flash存储库是否已过时？

  7. 7

    验证REST API参数

  8. 8

    ggplot：对齐多个分面图-所有大小不同的分面

  9. 9

    Mac OS X更新后的GRUB 2问题

  10. 10

    通过 Git 在运行 Jenkins 作业时获取 ClassNotFoundException

  11. 11

    带有错误“ where”条件的查询如何返回结果？

  12. 12

    用日期数据透视表和日期顺序查询

  13. 13

    VB.net将2条特定行导出到DataGridView

  14. 14

    如何从视图一次更新多行（ASP.NET - Core）

  15. 15

    Java Eclipse中的错误13，如何解决？

  16. 16

    尝试反复更改屏幕上按钮的位置 - kotlin android studio

  17. 17

    离子动态工具栏背景色

  18. 18

    应用发明者仅从列表中选择一个随机项一次

  19. 19

    当我尝试下载 StanfordNLP en 模型时，出现错误

  20. 20

    python中的boto3文件上传

  21. 21

    在同一Pushwoosh应用程序上Pushwoosh多个捆绑ID

热门标签

归档