个人中心
gpt4 book ai didi

css - 有没有办法减少小屏幕上显示的单选按钮数量，然后循环显示它们？

转载 作者：行者123 更新时间：2023-11-27 23:47:04 27 4
gpt4 key购买 nike

这是我第一次发帖，希望我遵守所有准则。如果没有，我很抱歉!

我正在尝试创建具有以下规范的响应式网站设计:
1.大背景图，不变
2. 下面一组(尚未确定数量)单选(？)按钮
-> 按钮需要互斥
3. 带有一些文本的图像叠加，当按下相应的单选按钮时会发生变化
4. 在移动模式下，只有两个按钮应同时显示，并且两个箭头会在所有可能的按钮之间循环显示。

我的问题从 4 开始:
- 我不知道从哪里开始
- 我不知道是否有这种行为的名称，我根本没听说过(这让谷歌搜索有点困难^^)

我想到了 Flex-boxes，但我所能做的就是包裹按钮，但这与隐藏它们并不完全相同。我还考虑过让按钮简单地消失(显示:无)，但我不太确定如何做到这一点。 (也许为引导类添加额外的规则？)

最重要的是，设计需要以这样一种方式进行布局，即客户可以决定有多少个按钮，例如我无法事先知道有多少个，也无法通过添加特定类来对它们进行分组。

唉，我的问题是:我可以在 slider 页面上动态嵌入单选按钮，我可以滚动浏览它，但前提是它在小屏幕上吗？ (我的猜测是，这不是一个简单的 css 问题)

编辑:指定问题

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="css/styles.css">
  <script src="https://kit.fontawesome.com/82bfdd8cdc.js"></script>
</head>
<body>
  <div class="">
    <div class="bg-screen">
      <img src="img/test.jfif" alt="  " class="bg-screen-img">
      <div class="bg-screen-textarea">
      </div>
      <p class="bg-screen-text dummy"></p>
      <div class="radio">
        <label>
          <input type="radio" name="radio" />
          <div class="radio-box box-1">
            <i class="fas fa-socks fa-3x"></i>
            <span>Choice 1</span>
          </div>
          <div class="bg-screen-text text-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nulla at volutpat diam ut venenatis tellus. Odio ut sem nulla pharetra diam sit
            amet. Phasellus egestas tellus rutrum tellus pellentesque eu tincidunt.</div>
        </label>
        <label>
          <input type="radio" name="radio" />
          <div class="radio-box box-2">
            <i class="fas fa-user-tie fa-3x"></i>
            <span>Choice 2</span>
          </div>
          <div class="bg-screen-text text-2">Sit amet facilisis magna etiam tempor orci eu lobortis. Consectetur lorem donec massa sapien faucibus et molestie ac feugiat.
          </div>
        </label>
        <label>
          <input type="radio" name="radio" />
          <div class="radio-box box-3">
            <i class="fas fa-building fa-3x"></i>
            <span>Choice 3</span>
          </div>
          <p class="bg-screen-text text-3">Risus ultricies tristique nulla aliquet enim tortor at auctor urna.</p>
        </label>
        <label>
          <input type="radio" name="radio" />
          <div class="radio-box box-4">
            <i class="fas fa-building fa-3x"></i>
            <span>Choice 4</span>
          </div>
          <p class="bg-screen-text text-4">Fringilla ut morbi tincidunt augue. Velit euismod in pellentesque massa placerat duis ultricies lacus. </p>
        </label>
        <label>
          <input type="radio" name="radio" />
          <div class="radio-box box-5">
            <i class="fas fa-building fa-3x"></i>
            <span>Choice 5</span>
          </div>

          <p class="bg-screen-text text-5">Ut enim blandit volutpat maecenas volutpat blandit aliquam etiam.</p>
        </label>
      </div>
    </div>
  </div>
</body>
</html>

input {
  display: none;
}

input+div{
  background: rgba(76, 175, 80, 0.3);
  border: 1px solid grey;
}

input:checked+div {
  background-color: green;
}

label {
  display: inline-block;
  margin: 0 1%;
}

/*removing clickability of text itself inside the labels for the radio-buttons*/
label span {
  /* Firefox */
  -moz-user-select: none;
  /* Internet Explorer */
  -ms-user-select: none;
  /* KHTML browsers (e.g. Konqueror) */
  -khtml-user-select: none;
  /* Chrome, Safari, and Opera */
  -webkit-user-select: none;
  /* Disable Android and iOS callouts*/
  -webkit-touch-callout: none;
}

label div i{
  margin: 15% auto;
}

input:checked~.bg-screen-text {
  display: inline-block;
  margin: -25% 10%;
  text-align: center;
  color: white;
}

.bg-screen{
  width: 100%;
  text-align: center;
}
.bg-screen-img{
  margin: 3% 7%;
  height: 25%;
  background-color: grey;
}

.bg-screen-text {
  display: none;
  position: absolute;
  text-align: center;
  left: 7%;
  right:7%;
  margin: 0 10%;
}

.radio {
  position: relative;
  top: -150px;
  margin: 3% 7%;
  text-align: center;
}

.radio-box {
  position: relative;
  height: 170px;
  width: 170px;
  display: inline-block;
  text-align: center;
}

.radio-box span {
  position: absolute;
  transform: translate(0, 90px);
  left: 0;
  right: 0;
}

最佳答案

谢谢!

我在 slick carousel 的帮助下让它工作。 ( https://github.com/kenwheeler/slick/ )这几乎为我提供了所有功能，而无需自己编写代码。

关于css - 有没有办法减少小屏幕上显示的单选按钮数量，然后循环显示它们？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56737829/

27 4 0
文章推荐： css - canvas border 增加面积，在canvas内部绘制border
文章推荐： c++ - CLion 无法解析类型 std::unordered_map，即使它提示我包含 header 并且编译工作正常
文章推荐： javascript - 在 JavaScript 中生成自然语言(动词)的库？
文章推荐： c++ - 是否可以制作接受多种数据类型的 C++ 函数？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com