0
合い、固定サイズのdiv /スパン。要するに、私はその結果に大喜びしています。私はそれが他のコンテンツとインライン化することができる要素として動作するように多くの問題を抱えています。コンテナ要素をスパンにすると、内容の構造が "崩れ"ます。それを復元しようとすると（例：display：ブロック）、内容が修正されますが、再度フローが破損します。私はHTML/CSS/JavaScriptでのiOSスタイルのトグルスイッチを作るしようとしているドキュメントフロー
現在のバージョンは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>
は、フロー内の任意の場所にコントロールを配置するためのオプションを持っているので、私が望んでいた場合、私は並んで2辺を持つことができ、または連続した行の上にあります。
（はい、それは適切なMooToolsはクラスでなければなりません - それは次の仕事です！）
動作しますが、IE6/7を残しました。 [QuirksMode - ディスプレイの互換性] – kapa
ホワイトスペースなしでこれを横並びにするには、ホワイトスペースを取り除かなければなりません。スペース（http://www.impressivewebs.com/inline-block/）。そして、IE6/IE7のWeb普及率はそれを裏付けているので、誰もがそれをサポートしていると思うのはショックです。 2つ以下のバージョンが最適です。 –
私はオプションとして「インラインブロック」を認識していませんでしたが、それはまさに私が欲しかったことです。ありがとうございました。 – Chris