Q&A
書籍画像を並べて表示、クリックすると画像の名前を受け取るプログラムを書いています。
表示方法としてformをinline-blockにして横並びにしています。
その際、どうしてもform右に空白が生まれてしまいます。
原因として（簡単に）改行コードを含むためと解釈しました。
そこでHTMLファイルであればformの終了タグから次のformの開始タグまでを<!-- -->で埋めることで解決することが分かりました。
私はphpファイルでforeachを使うことでformを並べています。
そうすると上記の実装は不可能です。（</form>から<form>の記載はないため）
この（phpファイルでforeachを使ってformを表示する）場合にはどのようにすれば空白を埋めることができるでしょうか？
改善策を教えていただけると幸いです。
該当のソースコード
php
1<?php 2 3 class Image{ 4 protected $imagePath; 5 6 public function __construct($imagePath, $imageName){ 7 $this->imagePath = $imagePath; 8 $this->imageName = $imageName; 9 } 10 11 public function getImagePath(){ 12 echo $this->imagePath; 13 } 14 15 public function getImageName(){ 16 echo $this->imageName; 17 } 18 } 19 20 $image1 = new Image('./img/output_1.jpg', 'output_1.jpg'); 21 $image2 = new Image('./img/output_2.jpg', 'output_2.jpg'); 22 $image3 = new Image('./img/output_3.jpg', 'output_3.jpg'); 23 24 $images = array($image1, $image2, $image3); 25 26?> 27 28<!DOCTYPE html> 29<html> 30 <head> 31 <meta charset="UTF-8"> 32 <title> Sample form </title> 33 <link rel="stylesheet" type="text/css" href="homestyle.css"/> 34 </head> 35 <body> 36 <h1> Sample form </h1> 37 <div class = "sample_form"> 38 <?php foreach($images as $image): ?> 39 <form method = "post" action = ""> 40 <input type = "image" src = "<?php echo $image->getImagePath() ?>" alt = "<?php echo $image->getImageName() ?>"> 41 <input type = 'hidden' name = "image_name" value = <?php echo $image->getImageName() ?>> 42 </form> 43 <?php endforeach ?> 44 </div> 45 </body> 46</html>
css
1form{ 2 display: inline-block; 3}
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
回答1件
0
ベストアンサー
空白を発生させてしまっている親タグのfont sizeを0にし
inputタグに適切なfont sizeを設定しなおせばおそらく解決すると思われます。
過去の記憶なので間違ってたらすみません。
投稿2021/01/07 23:32
編集2021/01/07 23:34
総合スコア106
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2021/01/07 23:43
2021/01/07 23:45