html <buttonを横に２つ並べる方法

提示コードの投稿を表示コメント部のコードですが提示画像のように改行されて表示されてしまうのですがどうすればボタンを一行で表示できるのでしょうか？　formタグでボタンを作るたびに改行されてしまうため２つ横に並べるという処理が上手く作れません。
提示画像のようにdeleteボタンの位置に　いいね　delete の順に並べたいです。

イメージ説明

php
1<html lang=ja>
2  <head>
3    <meta charset="utf-8">
4
5    <link rel="stylesheet" href="style.css">
6    <title>send</title>
7  </head>
8  <body>
9
10<?php
11session_start();       
12$viewNum  = 3;
13$pageNumber = isset($_GET["page"]) ? $_GET["page"] : NULL;
14
15$totalPageNum = 0;
16
17
18ini_set("display_errors",1);
19error_reporting(E_ALL);
20$url = isset($_GET["title"]) ? $_GET["title"] : NULL; // 
21?>
22
23<?php 
24try
25{
26   
27    $dsn = 'mysql:dbname=Bulletin_Board;host=localhost;charset=utf8';    
28    $dbh = new PDO($dsn,"root","");
29    $dbh->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION); 
30    
31    //post
32    $post = null;
33    $stmt = null;
34    if($pageNumber == NULL)
35    {        
36        $sql = 'SELECT comment,create_UUID FROM Post WHERE thread_UUID=:id ORDER BY create_time_stamp ASC'; 
37        $stmt = $dbh->prepare($sql);
38        $stmt->bindValue(':id', $url, PDO::PARAM_STR);       
39        $stmt->execute();
40        $post = $stmt->fetchAll();
41        
42       
43        $t = $stmt->rowCount() % $viewNum;
44        $r = 0;
45        if($t > 0)
46        {
47            $r = $stmt->rowCount() - $t;
48        }
49        else if($t == 0)
50        {
51             $r = $stmt->rowCount() - $viewNum;
52             if($r < 0)
53             {
54                 $r = 0;
55             }
56                  
57        }
58        else if($t < 0)
59        {
60            
61            $r = 0;
62        }
63
64        
65        $sql = 'SELECT comment,create_UUID ,create_time_stamp,enable,UUID FROM Post WHERE thread_UUID=:id ORDER BY create_time_stamp ASC LIMIT :limit OFFSET :offset '; 
66        $stmt = $dbh->prepare($sql);
67        $stmt->bindValue(':id', $url,PDO::PARAM_STR);
68        $stmt->bindValue(':limit', $viewNum, PDO::PARAM_INT);
69        $stmt->bindValue(':offset', $r, PDO::PARAM_INT);        
70        $stmt->execute();
71        $post = $stmt->fetchAll();
72               
73        $postNum = $stmt->rowCount(); //全部のページ数
74        $pageNum = $viewNum;               //１ページの表示件数
75        $totalPageNum = ceil($postNum / $pageNum);
76        
77        
78        
79    }
80    else
81    {
82        
83        $sql = 'SELECT comment,create_UUID,create_time_stamp,enable,UUID FROM Post WHERE thread_UUID=:id ORDER BY create_time_stamp ASC LIMIT :limit OFFSET :offset '; 
84        $stmt = $dbh->prepare($sql);
85        $stmt->bindValue(':id', $url,PDO::PARAM_STR);
86        $stmt->bindValue(':limit', $viewNum, PDO::PARAM_INT);
87        $stmt->bindValue(':offset', $pageNumber * $viewNum, PDO::PARAM_INT);
88        $stmt->execute();
89        $post = $stmt->fetchAll();
90        
91        //var_dump($post);
92    }
93     
94
95
96
97     
98}
99catch(PDOException $e)
100{
101    die($e->getMessage());
102}
103?>
104
105
106<!-- スレッドを列挙 -->
107<?php    
108for($i = 0; $i <  $stmt->rowCount(); $i++)        
109{
110    
111    $sql = 'SELECT name,id FROM Account WHERE UUID =:id';  
112    $stmt2 = $dbh->prepare($sql);
113    $stmt2->bindValue(':id',$post[$i]["create_UUID"] , PDO::PARAM_INT);
114    $stmt2->execute();
115    $account = $stmt2->fetch();
116    
117    
118    
119    if($post[$i]['enable'] == true)
120    {
121?>
122         <! --------------------- 投稿表示 --------------------->    
123         <h4> # 
124         <?php echo $account['name'] ?><br>
125   
126         &nbsp &nbsp &nbsp &nbsp &nbsp ID: <?php echo $account['id'] ?><br>
127   
128         <h4>---------------------------------------------------------------------
129         <p>  <?php echo $post[$i]['comment'] ?> </p>
130        <form action="postGood.php?post=<?php echo $post[$i]['UUID'] ?>" method="post"> <button class="goodButton"  type="submit" name="submit"> いいね </button> </form>
131                  
132         <?php
133         if(isset($_SESSION['id']) == true)
134         {
135             if(strcmp($_SESSION['id'],$account['id']) == 0)
136             {
137                 ?>
138                             
139                 <form action="postDelete.php?post=<?php echo $post[$i]['UUID'] ?>" method="post"> 投稿日時:  <?php echo $post[$i]['create_time_stamp'] ?>
140                 <button class="deleteButton"  type="submit" name="submit"> delete </button>
141                 </form>
142<?php
143             }         
144         }
145         ?>
146          <br>
147           </form>
148          ############################################ </h4><br>
149         <! ---------------------------------------------------->         
150<?php
151    }
152    else
153    {
154?>
155         <! --------------------- 削除された投稿表示 --------------------->    
156  <!---       <h4> # 
157         <?php echo $account['name'] ?><br>
158   
159         &nbsp &nbsp &nbsp &nbsp &nbsp ID: <?php echo $account['id'] ?><br> -->
160   
161         --------------------------------------------------------------------- </h4>
162         <p><br> ********** 削除されました。 ********** </p<br>
163
164        <!--- <h4>投稿日時:  <?php echo $post[$i]['create_time_stamp'] ?> </h4> -->
165         <h4> ############################################ </h4><br>
166         <! ---------------------------------------------------->  
167<?php
168    }
169}
170?>
171<br>
172<br>
173
174<?php
175
176
177
178$sql = 'SELECT * FROM Post WHERE thread_UUID=:id'; 
179$stmt = $dbh->prepare($sql);
180$stmt->bindValue(':id', $url, PDO::PARAM_STR);
181$stmt->execute();
182
183$postNum = $stmt->rowCount(); //全部のページ数
184$totalPageNum = ceil($postNum / $viewNum);
185
186//print($totalPageNum);
187
188if((isset($_SESSION['login']) == true) && (($pageNumber == ($totalPageNum - 1)) || (($pageNumber == NULL))))
189{
190?>
191    <h3>投稿</h3>
192
193    <form action="submit.php" method="post">
194    <input type="hidden" name="title" value=<?php echo $url; ?> >
195     <input type="hidden" name="nowPage" value=<?php echo $pageNumber; ?> >
196
197                            
198    <p>文章</p>      
199    <textarea name="comment"></textarea > 
200    <br>
201    <p><button type="submit">送  信</p>
202      
203    </form> 
204
205<?php
206}
207else if( (isset($_SESSION['login']) == false) && ($pageNumber == $totalPageNum - 1 ) )
208{   
209?>
210    <h3>投稿するにはログインしてください。</h3>
211    
212<?php
213}    
214?>
215
216<?php
217
218for($i = 0; $i < $totalPageNum; $i++)
219{
220    //print("thread.php?title=$url?page=$i");
221?>
222    
223    <a href="thread.php?title=<?=$url?>&page=<?=$i?>" > <?php echo $i ?></a>&nbsp &nbsp;
224<?php
225
226}
227?>
228    </body>  
229</html>
230

int32_t

2022/02/15 07:05

聞いている内容にPHPはまるで関係ないので、質問の PHP タグとコードのPHP部分は削除して、HTML/CSS だけのコードで聞くべきです。

m.ts10806

2022/02/15 07:25

というか、同じような質問ばかりでなにも学んでないのかと

回答2件

ベストアンサー

結論だけほしいのかもしれないところを無視して、そもそもの話をしてみたい。
HTML Living Standard 日本語訳 3 セマンティックス、構造、HTML文書のAPI群
「3.2.5.2 コンテンツの種類」の下りを理解するところから。

HTML要素が様々あるけれど、それぞれどう表現されるのかっていうのを、
この所属するコンテンツの種類によって決まっているようです。

その中で、フロー・コンテンツとフレージング・コンテンツとの関係性が重要で、
body要素内に配置されるフロー・コンテンツに属する要素は
（スタイルシートで改変しない限り）上から下に向かって並ぶものであって、横に並ばないのです。
フレージング・コンテンツに属する要素は「文書のテキストおよび段落内レベルでそのテキストをマークアップする要素」としてフロー・コンテンツに属する要素の中で横に並ぶ性格です。

form要素はフロー・コンテンツ、button要素はフレージング・コンテンツです。
form要素は本来なら横に並ばず縦方向に並べるものなので、
なんの工夫もなく並べようとしても、思うようにいかないはずです。

フロー・コンテンツをブロック要素、フレージング・コンテンツをインライン要素という言い方をすることもあります。

その関係性を壊すためにスタイルシート（CSS）を駆使します。

飽きてると思うのでショートカット的に説明すると、
display - CSS: カスケーディングスタイルシート | MDN
displayというCSSのプロパティを使って要素に変更を加えることで、
本来ブロック要素として振る舞うものがインライン要素として振る舞うようにできたり、
逆にインライン要素として振る舞うものがブロック要素として振る舞うようにできたりします。

振る舞いの変え方の考え方ですが、
今回気にしているform要素の外側に対してブロック要素として発揮し、
form要素の内側に対してもブロック要素として発揮しています。
外に対して、内に対して、を一括してCSSのdisplayプロパティにて指定できます。

form要素はフロー・コンテンツ、ブロック要素なので、
出現するform要素にCSSでdisplay: inline;を与えれば、フロー・コンテンツの中に入れることができます。
例えばp要素（フロー・コンテンツ、ブロック要素）で段落を定義し、
その内側に「display: inline;つきform要素」を配置し、
その内側にbutton要素を配置すれば、横に並びます。

説明を省きましたが、
CSS フローレイアウト - CSS: カスケーディングスタイルシート | MDN
CSS グリッドレイアウト - CSS: カスケーディングスタイルシート | MDN
CSS フレックスボックスレイアウト - CSS: カスケーディングスタイルシート | MDN
についても読んでいただいてご検討ください。

投稿2022/02/15 07:34

編集2022/02/15 07:44

退会済みユーザー

総合スコア0