JSで表示した画像を横並びにしたい

Question

JSで表示した画像を横並びにしたいです。関数をfor文でランダムに二つづつ呼び出して表示しています。

function a(){
document.write("<form action='facemash.php' method='post'>");
document.write("<input type='hidden' name='good' value='good'>");
document.write("<input type='image' src='2016-07-18 11.55.16.jpg'width='500px'height='500px'display='inline'>  ");
document.write("</form>");
document.write("<?php echo $file;?>");
} 


function b(){ document.write("<form action='facemash.php' method='post'>");
document.write("<input type='hidden' name='good1' value='good1'>");
document.write("<input type='image' src='2016-07-18 11.55.30.jpg'width='500px'height='500px'display='inline''> ");
document.write("</form>");
document.write("<?php echo $file1;?>");}


function c(){document.write("<form action='facemash.php' method='post'>");
document.write("<input type='hidden' name='good2' value='good2'>");
document.write("<input type='image' src='2016-07-18 11.51.25.jpg'width='500px'height='500px'display='inline'> ");
document.write("</form>");
document.write("<?php echo $file2;?>");}


function d(){document.write("<form action='facemash.php' method='post'>");
document.write("<input type='hidden' name='good3' value='good3'>");
document.write("<input type='image' src='2016-07-18 11.52.21.jpg'width='500px'height='500px'display='inline'> ");
document.write("</form>"); 
document.write("<?php echo $file3;?>");}

for (var i = 0 ; i < 2 ; i++){
func = ["a","b","c","d"];
n = Math.floor(Math.random()*4);
eval(func[n])();
}
</script>

inputタグの中でdisplayを当てても変わりませんでした。表示された画像をそれぞれ横に並べたいのですが...。widthやheightは適用されます。どうしたらよいでしょうか？

Comments

[kei344]

過去の質問についての返信が無いままになっています。問題が解決したなら「解決済」にしてください。

Answer 1

横に並べたい要素の親となるブロック要素に
display:flexつけたら横並びになりますよ！は

Answer 2

今は画像が2つ続けて表示されるのではなく、formが2つ生成されて、それを横並びにしようとしていますね。

ということは、form自体を

form {
display:inline-block;
}

とすれば横並びになります。
（inlineとinline-blockの違いは調べてみてください）

ただし注意点がいくつかあります。

①formの中身の幅が長すぎると横に並びようがない
これは中身の画像のサイズなどが関係してくるので、収まるように幅を設定してください。

②formのあとにinlineまたはinline-blockの要素が来るとそれも横に並んでしまう
formの後にくる要素をblockにするか、formふたつをさらにdivなどのblock要素で囲えば回避できます。

Answer 3

<form>タグはデフォルトでdisplay:blockがかかっているので、 中のinput要素にdisplay:inlineを指定しても横並びにはなりません。 <form>タグにCSSでdisplay:inlineを指定したら横に表示されると思います。

サンプル
http://codepen.io/chieeeeno/pen/OXwzQk