前提・実現したいこと
ボタンを作って並べました。
ボタンそのものは問題ないのですが、パンくずリストの表示が変わってしまいます。
パンくずに影響しないようにしたいです。
発生している問題・エラーメッセージ
エラーメッセージ
該当のソースコード
html
1<ul class="btn-row-1"> 2 <li class="btn-1-box"> 3 <div class="triangle"></div> 4 <a class="btn btn-1" href="#">オンライン面会について</a> 5 </li> 6 <li class="btn-1-box"> 7 <div class="triangle"></div> 8 <a class="btn btn-1" href="#">面会制限について</a> 9 </li> 10 <li class="btn-1-box"> 11 <div class="triangle"></div> 12 <a class="btn btn-1" href="#">入院診療のご案内</a> 13 </li> 14 <li class="btn-1-box"> 15 <div class="triangle"></div> 16 <a class="btn btn-1" href="#">面会のご案内</a> 17 </li> 18 </ul> 19 20 * {```css 21 padding: 0; 22 margin: 0; 23 box-sizing: border-box; 24 font-size: 14px; 25 } 26 li { 27 list-style: none; 28 } 29 a { 30 text-decoration: none; 31 color: #ffffff; 32 display: inline-block; 33 width: 100%; 34 } 35 36 .btn:hover { 37 color: #000000; 38 background-color: #E5E5E5; 39 40 } 41 42 .triangle { 43 position: absolute; 44 display: inline-block; 45 top: auto; 46 right: 5px; 47 width: 8px; 48 height: 8px; 49 border: 1px solid; 50 border-color: black black transparent transparent; 51 transform: rotate(45deg); 52 } 53 54 55 .btn-row-1 { 56 width: 100vw; 57 display: flex; 58 flex-wrap: wrap; 59 margin: 10px auto; 60 justify-content: center; 61 } 62 .btn-1-box { 63 display: flex; 64 align-items: center; 65 position: relative; 66 width: 190px; 67 margin: 8px; 68 } 69 .btn-1 { 70 background-color: #8CC8F7; 71 color: #000000; 72 /* ボタン内の余白 */ 73 padding: 10px 10px; 74 text-align: start; 75 border: 1px solid #E5E5E5; 76 border-radius: 2px; 77 78 } 79 80 81 } 82``` 83 84### パンくずのところ 85```html 86<div style="margin-left:0;margin-right:auto;"> 87 <div class="BrowserBreadCrumbs_Pref01" style="width:100%;background-color:#ffffff;"> 88 現在の位置:<a id="H7_141925_BreadList_ctl00_BreadLink" href="./">ホーム</a><img src="css/Browser_C/BreadCrumbs_pref01/r-arrow.gif" alt="" width="12" height="6" style="vertical-align: middle !important;" /><a id="H7_141925_BreadList_ctl02_BreadLink" href="soshiki/">○○○○○</a><img src="css/Browser_C/BreadCrumbs_pref01/r-arrow.gif" alt="" width="12" height="6" style="vertical-align: middle !important;" /><a id="H7_141925_BreadList_ctl04_BreadLink" href="fukushi/">○○○○</a><img src="css/Browser_C/BreadCrumbs_pref01/r-arrow.gif" alt="" width="12" height="6" style="vertical-align: middle !important;" /><a id="H7_141925_BreadList_ctl06_BreadLink" href="#">○○○</a> 89 </div> 90</div><div class="EndClear"></div> 91<!--BreadCrumbs_Pref01 end--></div> 92 93``` 94```css 95.BrowserBreadCrumbs_Pref01{ 96 color: black; 97 font-size: 100%; 98 text-align: left; 99 background-image:url(ac13.gif); 100 padding:10px 0px 10px 0px; 101 margin: 0 0 10px 0px; 102float:left; 103} 104``` 105### 試したこと 106 107<div>でかこってみたりしましたが、だめでした。 108 109### 110![イメージ説明](5894ed78617cf97012c0847d56e31789.gif) 111 112親ページ(上の組織)からの子ページです。 113i-SITE PORTAL という CMS を使用しています。
パンくずリスト側のソースがないと、どう影響があるかも判断できませんので掲載をお願いします。
期待している表示のご提示をお願いします。
また、コードはマークダウンで書いてください。
期待した処理結果を書きましょう
https://teratail.com/help/question-tips#questionTips3-4-3
ソースコードを書きましょう
https://teratail.com/help/question-tips#questionTips3-5-1
回答1件
あなたの回答
tips
プレビュー