ボタンを追加し均等な幅に並べる dentaq Follow 2011-07-05 13:03:23 License: MIT License Fork0 Fav0 View836 「ボタンを追加！」ボタンを押すと、ボタンが次々と生成されていきます。その幅を常に100%を個数分に均等に分割し生成します。 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 16 lines HTML 8 lines CSS 31 lines 「ボタンを追加！」ボタンを押すと、ボタンが次々と生成されていきます。その幅を常に100%を個数分に均等に分割し生成します。 ボタンを追加し均等な幅に並べる function append() { var pobj = document.getElementById("div1"); var cobj = document.createElement("li"); pobj.appendChild(cobj); var n_size=$("#div1 li").size(); var aWidth= 100 / n_size; aWidth=Math.round(aWidth); $("#div1 li").css("width", aWidth+"%"); $("#div1 li").html('<a href="#">btn</a>'); } <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <form name="Form1"> <input type=button value="ボタンを追加!" onClick="append()" /> </form> <ul id="div1"> </ul> ボタンを追加し均等な幅に並べる ul#div1 { margin:0; padding:0; list-style: none; } #div1 li { display:inline-block; width:100%; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 1px 1px 3px #000000; -moz-box-shadow: 1px 1px 3px #000000; box-shadow: 1px 1px 3px #000000; background-image: -moz-linear-gradient(top, #FFFFFF, #D3D3D3); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #FFFFFF), color-stop(1.0, #D3D3D3)); border: 0px solid #000000; background-color: #FFFFFF; padding: 12px 0; text-align: center; } #div1 li a{ font-family: Verdana, Geneva, sans-serif; font-weight: bold; font-size: 12pt; color: #888888; text-decoration:none; text-shadow: 1px 1px 3px #C0C0C0; } 「ボタンを追加！」ボタンを押すと、ボタンが次々と生成されていきます。その幅を常に100%を個数分に均等に分割し生成します。 function append() { var pobj = document.getElementById("div1"); var cobj = document.createElement("li"); pobj.appendChild(cobj); var n_size=$("#div1 li").size(); var aWidth= 100 / n_size; aWidth=Math.round(aWidth); $("#div1 li").css("width", aWidth+"%"); $("#div1 li").html('<a href="#">btn</a>'); } <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <form name="Form1"> <input type=button value="ボタンを追加!" onClick="append()" /> </form> <ul id="div1"> </ul> ul#div1 { margin:0; padding:0; list-style: none; } #div1 li { display:inline-block; width:100%; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 1px 1px 3px #000000; -moz-box-shadow: 1px 1px 3px #000000; box-shadow: 1px 1px 3px #000000; background-image: -moz-linear-gradient(top, #FFFFFF, #D3D3D3); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #FFFFFF), color-stop(1.0, #D3D3D3)); border: 0px solid #000000; background-color: #FFFFFF; padding: 12px 0; text-align: center; } #div1 li a{ font-family: Verdana, Geneva, sans-serif; font-weight: bold; font-size: 12pt; color: #888888; text-decoration:none; text-shadow: 1px 1px 3px #C0C0C0; } use an iframe compat browser, deer Play on jsdo.it games Share Embed QR Tag Download Complete! Description どんなゲームですか？ 「ボタンを追加！」ボタンを押すと、ボタンが次々と生成されていきます。その幅を常に100%を個数分に均等に分割し生成します。 Control Device スマートフォンコントローラー jsdo.it WebSocket Controller» マウス キーボード タッチデバイス Fullscreen 有効 無効 jsdo.it games から削除する Submit Tweet style Design view Code view code <script type="text/javascript" src="http://jsdo.it/blogparts/rjov/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/dentaq/rjov" title="ボタンを追加し均等な幅に並べる">ボタンを追加し均等な幅に並べる - jsdo.it - share JavaScript, HTML5 and CSS</a></p> text-shadow Tweet twitter Tags text-shadow
