为什么会出现在某些屏幕尺寸的DIV之间的空白
问题描述:
我有以下代码:为什么会出现在某些屏幕尺寸的DIV之间的空白
<div class="mobileTabsNavSub brClear">
<div class="mbBtnLeftMW mbBtnLeftStyle floatLeft">
</div>
<div class="mbBtnRightMW mbBtnRightStyle floatRight">
</div>
<div class="mBtnMidMW mBtnMidStyle">
<div>
<img id="mbMW1" src="icon.png" class="mBtnIcon" />
</div>
<div>
<a href="localhost:9090" title="services"><span id="mbMW" class="mbBtnText">Services</span></a>
</div>
</div>
</div>
CSS:
.mobileTabsNav
{
display: none;
width: 100%;
overflow: hidden;
margin: 10px 0 10px 0;
}
.mobileTabsNavSub
{
width: 100%;
padding: 0 0 10px 0;
}
.mbBtnLeftMW
{
background: url('../theImages/mbMWLeft.png') no-repeat;
}
.mbBtnRightMW
{
background: url('../theImages/mbMWRight.png') no-repeat;
}
.mBtnMidMW
{
background: url('../theImages/mbMWMiddle.png');
}
.mbBtnLeftStyle
{
min-height: 50px;
max-height: 50px;
width: 10px;
background-size: contain;
}
.mbBtnRightStyle
{
min-height: 50px;
max-height: 50px;
width: 10px;
background-size: contain;
}
.mBtnMidStyle
{
overflow: hidden;
min-height: 50px;
max-height: 50px;
background-size: contain;
margin: 0 0px 0 8px;
text-align: center;
vertical-align: middle;
line-height: 40px;
}
.floatLeft
{
float: left;
}
.floatRight
{
float: right;
}
大多数屏幕尺寸输出:
出于某种屏幕尺寸:
三幅影像:
请帮助得到一些这些设备的摆脱白色空间。
答
之后开始评论,并在下一个
你可以尝试添加注释“链接”的div并删除任何空白(不知道它在你的情况,因为浮动位置)
<div class="mobileTabsNavSub brClear">
<div class="mbBtnLeftMW mbBtnLeftStyle floatLeft"></div><!--
--><div class="mbBtnRightMW mbBtnRightStyle floatRight"></div><!--
--><div class="mBtnMidMW mBtnMidStyle">
<div>
<img id="mbMW1" src="icon.png" class="mBtnIcon" />
</div>
<div>
<a href="localhost:9090" title="services"><span id="mbMW" class="mbBtnText">Services</span></a>
</div>
</div>
+0
你究竟是什么意思? – Si8 2014-11-06 16:22:36
+0
请参阅divs之间的灰色''?它的意思是删除它们之间的空格,这就是他的意思 – Banana 2014-11-06 16:27:04
+0
@ SiKni8插入html注释标记删除空格(在你的情况下,分隔div的“新行” - 被解释为一个空格 - 见代码在我的回答中,在每个
之前关闭评论。如果你想让代码缩进,如果你愿意,你可以删除div之间的所有“新行”这是相同的 –
peppeocchi
2014-11-06 16:27:28
你能不能设置一个[ jsfiddle](http://jsfiddle.net),我很乐意帮助你。 – Jacta 2014-11-06 16:01:56
我有jsfiddle,但没有显示出于某种原因:http://jsfiddle.net/56zcwacs/(我从我的问题中拿走了图像链接) – Si8 2014-11-06 16:10:43