前提・実現したいこと
在庫数に応じてボタンの配置を変更したい
在庫がある場合:買い物かごボタンと戻るボタンを横に配置
在庫がない場合:買い物かごボタンの位置に戻るボタンのみ表示し、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/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
(質問文は編集できます)HTMLに「th:if」のような属性値は仕様上ありません。たぶん何らかのテンプレートエンジンを通して出力するためのコードだと思いますが、CSSでのスタイリングの問題であるなら、出力されたHTML(ブラウザで「ページのソースを表示」)のほうが回答を得やすいと思います。分岐処理について問題があるのであれば「CSSでボタンの配置を調整」ではないのでタイトルを修正されたほうが良いです。
回答1件
あなたの回答
tips
プレビュー