こんにちは
サイトの見栄えが変わってしまうのですが
どのように変わってしまうのでしょうか?
リストが横並びでリスト間に隙間ができてしまうということでしょうか?この場合は ul のフォントサイズを0(font-size:0)などにすることで隙間はできなくなると思います。
例:
ul.list-group { font-size: 0; }
早速の回答ありがとうございます。
画像が貼れればわかりやすいのですが、文字で書くと下記のようになります。
整形前
お知らせ ××
お知らせ △△
整形後
お知らせ
××
お知らせ
△△
謎の挙動なのか、よくわかっておりません。
インラインブロックによる隙間が影響しているためだと思うのですが、実際のページを見てみないとわかりません。
参考ページ: https://qiita.com/BEMU/items/0f500e0306471073ed63
CSS で対応できると思うのですが、確認できるページはありますか?
br タグが挿入されています。
すべてのプラグインを停止して試してみてください。
回答ありがとうございます。
brタグですか・・・・・・
テキストのソースには表示されていないのですが、どういうことなんでしょう。
<div class=”container”>
<h3 class=”text-center bg-dark text-light col-8 mx-auto”>テスト2</h3>
<section>
<div class=”row”>
<div class=”col-8 mx-auto”>
<ul class=”list-group d-block mx-auto”>
<li class=”mt-0 mb-0″>
<button class=”btn-info” type=”button”>お知らせ</button>
表示テスト1
<li class=”mt-0 mb-0″>
<button class=”btn-info” type=”button”>お知らせ</button>
表示テスト2
</div>
</div>
</section>
</div>
ちなみに、全てのプラグインを停止しましたが変わりません。謎だ・・・・・・
http://zh0119.xbiz.jp/test/test1/
こちらの HTML は、
<section>
<div class="row">
<div class="col-8 mx-auto">
<ul class="list-group d-block mx-auto">
<li class="mt-0 mb-0">
<button class="btn-info" type="button">お知らせ</button><br />
表示テスト1</li>
<li class="mt-0 mb-0">
<button class="btn-info" type="button">お知らせ</button><br />
表示テスト2</li>
</ul></div>
</p></div>
</section>
のように br タグが挿入されています。
プラグインかテーマにより出力時に追加されているのではないでしょうか?プラグインをすべて停止したということなので、テーマを変更して試してみてください。
度々ご回答ありがとうございます。
テーマをTwenty NineteenまたはTwenty Seventeenに変更して確認いたしましたが
表示は同じですね。
なぜ、<br>タグが挿入されてしまうのか、にもかかわらずソースに反映されているわけではないのか。
やはり謎です。
とりあえずはコード内で整形しないように(なるべく1行で書く)して、サイトを運営しています。
謎ですね。
根本的な解決策ではありませんが、暫定的な対応として br を非表示(display:none)にしてみてはどうでしょうか。
ul.list-group li button + br {
display: none;
}
CSSに追加して非表示にすると、同一の表示になりますね。
解決策としてはベストだと思います。いろいろありがとうございました。
とりあえず、私の方は解決しましたが(何故タグが入るのかスッキリはしませんが)、
同様の悩みがある方もいるかもしれないので、しばらくこのスレッドは開けておきます。