css - jquery mobile extra spacing on bottom of div -
getting unwanted spacing on bottom of divs.
desire:
- - - - - - - - - - - - - - - - - - - | | | | button1 | button2 | | | | - - - - - - - - - - - - - - - - - - - | title | - - - - - - - - - - - - - - - - - - - | | | page info.... |
but i'm getting
- - - - - - - - - - - - - - - - - - - | | | | button1 | button2 | | | | - - - - - - - - - - - - - - - - - - - 5px gap - - - - - - - - - - - - - - - - - - - | title | - - - - - - - - - - - - - - - - - - - | | | page info.... |
note: wanted style background put before content div.
<div data-role="page"> <style> .topwrapper{ width:100%; padding:0; margin:0; display:inline-block; } .topwrapper a{ width:50%; padding-top:10px; padding-bottom:10px; float:left; } .myhr{ width:100%; margin:0; padding:0; line-height:1em; font-size:1em; } .pageinfo{ width:100%; margin:0; padding:0; } </style> <div data-role="header"> <h1>title</h1> <a data-role="back" href="/app/post">back</a> </div> <div class="topwrapper"> <a href="#" class="active">button1</a> <a href="#">button2</a> </div> <div class="myhr">title</div> <div class="pageinfo">...</div> <div data-role="content"></div> </div>
i think need override default margin
on button
s.
so css should
.topwrapper a{ width:45%; padding-top:10px; padding-bottom:10px; float:left; margin-bottom:0 !important; //add }
i reduced width
there no problems float
.
the red border
on title
can removed. it's there show difference. (if remove margin-bottom:0 !important;
, run fiddle again see 5px
gap)
Comments
Post a Comment