Q&A
うまくいきませんでした。。。
MONACAのテンプレート使ってアプリを作成しています。
page1 のTOOLBARの部分にボタンと、topというidの<div> を配置しました。
この余白を除去するにはどのようにすればよいのでしょうか。
ご存じの方ぜひご教示のほうよろしくお願いいたします。
回答2件
0
ベストアンサー
Chrome DevToolsを使用して、どのようなHTMLが生成されているか確認すれば原因がわかります。
今回の場合、<div class="left toolbar__left"></div>が自動的に埋め込まれ、そのクラスtoolbar__leftのwidth:27%;が影響し、余白が表示されます。
HTML
1<ons-navigator id="navigator" page="page1.html" _is-running="false" data-device-back-button-handler-id="0" style="touch-action: pan-y; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"> 2 <ons-page id="first-page" class="page" shown="" style=""> 3 <ons-toolbar class="toolbar"> 4 <ons-button id="push-button" class="button">X</ons-button> 5 <div class="left toolbar__left"></div> 6 <div class="center toolbar__center toolbar__title" id="top">あああああああああああああああああああああああああああああああああああああああああああああああ</div> 7 <div class="right toolbar__right"></div> 8 </ons-toolbar> 9 <div class="page__background"></div> 10 <div class="page__content"></div> 11 </ons-page> 12</ons-navigator> 13<template id="page1.html"> 14 <ons-page id="first-page"> 15 <ons-toolbar> 16 <ons-button id="push-button">X</ons-button> 17 <div class="center" id="top">あああああああああああああああああああああああああああああああああああああああああああああああ</div> 18 </ons-toolbar> 19 </ons-page> 20</template>
単純に余白を消す場合は、display:none;にスタイルを書き換えます。
CSS
1#first-page .toolbar__left { 2 display: none; 3}
投稿2019/12/08 08:38
総合スコア276
0
<ons-button id="push-button"> を <div class="left"> </div> で囲んでみるのはどうでしょうか。
また、以前同じようなことがあった時、ダミーで <div class="right></div> で調整したことがあります。
投稿2019/12/02 07:01
総合スコア250
moongiftさん、アシアルブログの人じゃないですか
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。