質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Spring Boot

Spring Bootは、Javaのフレームワークの一つ。Springプロジェクトが提供する様々なフレームワークを統合した、アプリケーションを高速で開発するために設計されたフレームワークです。

Q&A

解決済

1回答

729閲覧

CSSでボタンの配置を調整したい

iiko24

総合スコア0

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Spring Boot

Spring Bootは、Javaのフレームワークの一つ。Springプロジェクトが提供する様々なフレームワークを統合した、アプリケーションを高速で開発するために設計されたフレームワークです。

0グッド

0クリップ

投稿2020/06/18 08:45

前提・実現したいこと

在庫数に応じてボタンの配置を変更したい

在庫がある場合:買い物かごボタンと戻るボタンを横に配置
在庫がない場合:買い物かごボタンの位置に戻るボタンのみ表示し、2つ目の戻るボタンは表示させない

発生している問題・エラーメッセージ

在庫数が0の場合は戻るボタンのみが表示出来ているが、在庫がある場合2つのボタンが縦に並んでしまう

該当のソースコード

html

1<!-- 買い物かごに入れるボタン(在庫数が0でない場合表示) --> 2 3 <div th:if="${item.stock != 5}"> 4 <form method="post" th:action="@{/basket/add}"> 5 <input type="submit" value="買い物かごに入れる" class="back_button" /> 6 </form> 7 </div> 8 9 <!-- 戻るボタン(在庫数が0の場合表示) --> 10 <div th:if="${item.stock == 5}"> 11 <form th:action="@{/item/list/1}"> 12 <input type="submit" value="戻る" class="back_button" /> 13 </form> 14 </div> 15 16 <!-- 戻るボタン(在庫数が0でない場合表示) --> 17 <form th:action="@{/item/list/1}"> 18 <div th:if="${item.stock != 5}"> 19 <input type="submit" value="戻る" class="back_button" /> 20 </div> 21 </form> 22 23 24 </div> 25

試したこと

今回は在庫0ではなく登録されている個数で確認がしやすい5個にしてあります。
if文と在庫数が0の文を削除した状態で行うと買い物かごボタンと戻るボタンは並んで表示されます。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2020/06/18 11:01

(質問文は編集できます)HTMLに「th:if」のような属性値は仕様上ありません。たぶん何らかのテンプレートエンジンを通して出力するためのコードだと思いますが、CSSでのスタイリングの問題であるなら、出力されたHTML(ブラウザで「ページのソースを表示」)のほうが回答を得やすいと思います。分岐処理について問題があるのであれば「CSSでボタンの配置を調整」ではないのでタイトルを修正されたほうが良いです。
guest

回答1

0

自己解決

divタグを削除し、formタグ内に記述することで目的の表示が出来ました。

投稿2020/06/19 02:37

iiko24

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問