html - 与文档流一起使用的固定大小的 div/span-6ren

html - 与文档流一起使用的固定大小的 div/span

转载作者：太空宇宙更新时间：2023-11-04 05:14:42

24

4

我正在尝试使用 HTML/CSS/JavaScript 制作一个 iOS 风格的切换开关。在这一点上，我对结果非常满意。我在让它作为一个可以与其他内容内联的元素时遇到了很多麻烦。如果我将容器元素设为跨度，内容的结构就会“分崩离析”。任何恢复该内容的尝试(例如显示: block )都会修复内容，但会再次中断流程。

当前版本是 here , 并转载如下。所有资源(mootools 和 handle 图像)都在线且绝对链接，如果您有尝试任何修复的冲动。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
        <title>Slider experiment</title>

        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.4.1/mootools-yui-compressed.js"></script>

        <style type="text/css">

        .slider {
            border                  : thin solid #808080;
            display                 : block;
            width                   : 90px;
            overflow                : hidden;
            font-family             : sans-serif;
            font-size               : 80%;
            margin                  : 10px;

            cursor                  : pointer;      /* We don't want the text selection cursor here  */

            -moz-border-radius      : 3px;
            -webkit-border-radius   : 3px;
            -khtml-border-radius    : 3px;
            border-radius           : 3px;

            opacity                 : 0.99;         /* Completely transparent isn't clickable in Firefox */
        }

        .slider div {
            width                   : 200px;        /* More than enough for contents, to avoid wrapping */
            display                 : block;

            position                : relative;     /* So that the z-index has an effect */
            z-index                 : -1;

        }

        .slider div span {
            text-align              : center;
            line-height             : 19px;
            padding-top             : 1px;
            height                  : 19px;
            float                   : left;
            width                   : 62px;
            font-weight             : bold;

            -moz-border-radius      : 2px;
            -webkit-border-radius   : 2px;
            -khtml-border-radius    : 2px;
            border-radius           : 2px;

        }


        .slider div span.tab {
            padding-top             : 0px;
            width                   : 32px;
            margin-left             : -3px;
            margin-right            : -3px;

            position                : relative;     /* So that the z-index has an effect */
            z-index                 : 0;
        }

        .slider div span.on {
            background-color        : #4040ff;
            color                   : #E0E0E0;
        }

        .slider div span.off {
            background-color        : #E0E0E0;
            color                   : #a0a0a0;
        }

        </style>

        <script type="text/javascript">
        <!--
            function switchOff(itm)
            {
                console.log("Switching off");
                itm.fx.start('-60px');
                itm.state = 0;
            }

            function switchOn(itm)
            {
                console.log("Switching on");
                itm.fx.start('0px');
                itm.state = 1;
            }

            window.addEvent('domready', function() {

                $$('.slider').each( function(itm) {

                    itm.fx = new Fx.Tween(itm.getChildren()[0], {duration: '125', property: 'margin-left'});
                    itm.state = 1;
                    itm.addEvent('click', function() {
                        if (itm.state==1)
                        {
                            switchOff(itm);
                        }
                        else
                        {
                            switchOn(itm);
                        }
                    });
                });
            });

        //-->
        </script>

    </head>
    <body>
        <div style="width: 400px; margin: 10px">
            Switch :
            <div class="slider">
                <div><span class="on">ONLINE</span><span class="tab"><img src="http://azureblue.org/so/handle.png" width=32px height=20px></span><span class="off">OFFLINE</span></div>
            </div>

            <div class="slider">
                <div><span class="on">ON</span><span class="tab"><img src="http://azureblue.org/so/handle.png" width=32px height=20px></span><span class="off">OFF</span></div>
            </div>

        </div>
    </body>
</html>

我真正希望能够做的是可以选择将控件放置在流中的任何位置，这样我可以根据需要将两个控件并排放置，或者放在连续的行上。

(是的，它应该是一个合适的 Mootools 类——那是下一个工作!)

最佳答案

您可以使用display: inline-block。

你仍然会有 block 属性、宽度、高度、填充、边距属性，但仍然很容易在内联布局(即表单或其他一些布局)中显示。

关于html - 与文档流一起使用的固定大小的 div/span，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8457143/

24

4

0

文章推荐： python - Pandas - 将字符串类型转换为 float

文章推荐： java - 当我关闭 session 时 Spring Boot 关闭

文章推荐： python - 压缩属于同月的文件

文章推荐： php - 旧浏览器中带有https的错误网站

java - 流<流> : flatMap vs. 减少
这个问题在这里已经有了答案: Why filter() after flatMap() is "not completely" lazy in Java streams? (8 个答案) 关闭 6
instagram - 是否有像 Twitter 流 API 一样的 Instagram 流 API？
我正在创建一个应用程序来从 Instagram 收集数据。我正在寻找像 Twitter 流 API 这样的流 API，这样我就可以自动实时收集数据而无需发送请求。 Instagram 有类似的 API
java - 您的 InputStream 既不是 OLE2 流，也不是 OOXML 流
我正在使用 Apache Commons 在 Google App Engine 中上传一个 .docx 文件，如此链接中所述 File upload servlet .上传时，我还想使用 Apach
java - 使用 AWS Java DynamoDB 流 Kinesis 适配器处理 DynamoDB 流
我尝试使用 DynamoDB 流和 AWS 提供的 Java DynamoDB 流 Kinesis 适配器捕获 DynamoDB 表更改。我正在 Scala 应用程序中使用 AWS Java 开发工具
FFMPEG RTSP IP 流 (H.264) 转换为 RTSP 流 (MPEG-2)
我目前有一个采用 H.264 编码的 IP 摄像机流式视频 (RTSP)。我想使用 FFmpeg 将此 H.264 编码流转换为另一个 RTSP 流，但 MPEG-2 编码。我该怎么做？我应该使用哪
集群模式下的 Redis 流
Redis 流是否受益于集群模式？假设您有 10 个流，它们是分布在整个集群中还是都分布在同一节点上？我计划使用 Redis 流来实现真正的高吞吐量(200 万条消息/秒)，所以我担心这种规模的 Re
Java 流 - 在可空列表上进行流式处理的优雅方式
这件事困扰了我一段时间。所以我有一个 Product 类，它有一个 Image 列表(该列表可能为空)。我想做 product.getImages().stream().filter(...) 但
具有持久存储的 Redis 流
是否可以使用具有持久存储的 Redis 流还是流仅限于内存数据？我知道可以将 Redis 与核心数据结构的持久存储一起使用，但我已经能够理解是否也可以使用 Redis 中的流的持久存储。最佳答
elixir - 具有前瞻性的可枚举/流
我开始学习 Elixir 并遇到了一个我无法轻松解决的挑战。我正在尝试创建一个函数，该函数接受一个 Enumerable.t 并返回另一个 Enumerable.t ，其中包含下 n 个项目。它与
scala - readLines 流
我试图从 readLine 调用创建一个无限的字符串流: import java.io.{BufferedReader, InputStreamReader} val in = new Buffere
Java 8 流 : For Each
你能帮我使用 Java 8 流 API 编写以下代码吗？ SuperUser superUser = db.getSuperUser; for (final Client client : super
rust - 暗示AsyncRead为补品::流
我正在尝试服用补品routeguide tutorial，并将客户端变成rocket服务器。我只是接受响应并将gRPC转换为字符串。 service RouteGuide { rpc GetF
javascript - 流 - 类型可能与联合类型不兼容
流程代码可以是run here. 使用 flow，我有一个函数，它接受一个键值对对象并获取它的值 - 它获取的值应该是字符串、数字或 bool 值。 type ValueType = string
javascript - 流、对象字面量与联合不兼容
如果我有一个函数返回一个包含数据库信息的对象或一个空对象，如下所示: getThingFromDB: async function(id:string):Promise{ const from
facebook - 流。发布ogg
我正在尝试使用javascript api和FB.ui将ogg音频文件发布到流中，但是我不知道该怎么做。这是我给FB.ui的电话: FB.ui( { method: '
Accurev:无法删除工作区/流
我正在尝试删除工作区(或克隆它以使其看起来像父工作区，但我似乎两者都做不到)。但是，当我尝试时，我收到此消息:无法删除工作区 test_workspace，因为它有一个非空的默认组。据我所知，这意味
java - 流 'map'可以用于这样的处理吗？
可以使用 Stream|Map 来完成此操作，这样我就不需要将结果放入外部 HashMap 中，而是使用 .collect(Collectors.toMap(...)); 收集结果？ Map rep
Java 流 API
当我们从集合列表中获取 Stream 时，幕后到底发生了什么？我发现很多博客都说Stream不存储任何数据。如果这是真的，请考虑代码片段: List list = new ArrayList(); l
带列表的 Java 流
我对流及其工作方式不熟悉，我正在尝试获取列表中添加的特定对象的出现次数。我找到了一种使用Collections来做到这一点的方法。其过程如下: for (int i = 0; i p.conten
Java 流 - 映射列表到简化的映射列表
我希望将一个 map 列表转换为另一个分组的 map 列表。所以我有以下 map 列表 - List [{ "accId":"1", "accName":"TestAcc1", "accNumber

首页

博学

6Ren·AI

商城

html - 与文档流一起使用的固定大小的 div/span