Question

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

当前版本为here，并在下方转载。所有资源（mootools和手柄图像）绝对是在线和链接的，如果您有尝试任何修复的冲动。

<!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课程 - 这是下一份工作！）

Answer 1

您可以使用display: inline-block。

您仍然可以使用块属性，宽度，高度，填充，边距属性，但仍然可以在内联布局（即表单或其他布局）中轻松显示。

Answer 2

您可以添加CSS并尝试 float：left

与文档流程一致的固定大小div / span

2 个答案: