PHPとMySQLを用いた勤怠管理システム

前提・実現したいこと

PHPとMySQLを利用して勤怠管理システムを作成しております。
本システムの構成として、トップページで会員情報を登録し、登録した情報を基に出退勤時刻及び日付を記録し、最終的に一ヶ月分のデータを一覧として表示させます。現在は、トップページの新規登録画面とログイン画面は作りました。ログイン後のページは、出退勤登録画面となります。以下の画像は出退勤登録画面の構成である。現在、出勤ボタンと退勤ボタンが縦並びとなっています。これを横並びかつ出勤ボタンと退勤ボタンの間に少し隙間を開けるためにはどうすれば良いですか。よろしくお願いいたします。ここで、timecard.jsは時刻と日付を表示させるものになります。イメージ説明](1551456d0f0307b166dffaba863407ec.png)

該当のソースコード

<!DOCTYPE html>
<html lang = "ja">
<head>
<meta charset = "UTF-8">
<link rel = "stylesheet" type = "text/css" href = "top.css" />
<title>timecard</title>
</head>
<body>
<hr>出退勤登録画面<hr>

<p id="RealdateTime"></p>
<script src = "timecard.js"></script>

<form name = "form1" method = "post" action = "begin.php">
<input type = "submit" name = "begin" value = "出勤">
</form>

<form name = "form2" method = "post" action = "finish.php">
<input type = "submit" name = "finish" value = "退勤">
</form>
</body>
</html>

BeatStar

2021/07/08 13:11

これはPHPやMySQLは関係ありません。 CSSの領域です。単にボタンタグにCSSを付与してそろえればいいのでは?

m.ts10806

2021/07/08 13:19

タイトルも修正してほしいですね。タイトルと内容が遠い

行動規範の内容に同意します

回答2件

cssでfloat（もしくはinline）してmarginつければ良いのでは。

投稿2021/07/08 13:11

m.ts10806

総合スコア80861

ベストアンサー

CSSの問題ですね
構造をちょっとイジる必要があります

CSS
1<style>
2.wrap{
3display:flex;
4}
5.wrap form:not(:first-child){
6  margin-left:10px;
7}
8</style>
9<hr>出退勤登録画面<hr>
10<p id="RealdateTime"></p>
11<script src = "timecard.js"></script>
12<div class="wrap">
13<form name = "form1" method = "post" action = "begin.php">
14<input type = "submit" name = "begin" value = "出勤">
15</form>
16<form name = "form2" method = "post" action = "finish.php">
17<input type = "submit" name = "finish" value = "退勤">
18</form>
19</div>