在我的iPad屏幕的整个宽度上,div块一直存在问题.它似乎从屏幕右侧停止了大约20个像素.
截图:

对于菜单,我有一个div块和一个UL内部的菜单本身.UL的宽度设置为1000px,背景div块设置为宽度:100%; 这个背景的宽度恰好是1009px.
页脚是一个带背景的div块,以及两个浮动的div块.背景的宽度恰好是1004px.
我在其他网站上遇到过这个问题,特别是在这方面.任何人都有任何想法?
我正在尝试放置一些(垂直堆叠)显示:显示内的块元素:内联块元素.根据CSS规范,内联块元素应该是一个包含块,因此它可以在其中包含display:block元素,这些元素不应影响布局的其余部分.
但是,display:block元素在显示内部:inline-block元素会破坏页面的其余部分; 所以在内联块中什么也没有,甚至像段落这样的基本元素; 只有简单的文本才能避免破坏页面的其余部分(通过中断我的意思是将其他div向下移动,例如,在这种情况下,左侧红色块向下移动一行并且在其上方有一个空白空格).我正在使用Firefox 3.0.6.
<html><head><style type="text/css">
#left {
display: inline-block;
background: red;
width: 20%;
height: 100%;
}
#right {
display: inline-block;
background: green;
width: 80%;
height: 100%;
}
</style></head><body>
<div id="left">Left</div><div id="right">Right</div>
</body></html>
Run Code Online (Sandbox Code Playgroud)
以上显示为两个窗格,左红色,右绿色,如预期.如果我改变"正确"
<p>Right</p>
Run Code Online (Sandbox Code Playgroud)
或者完全删除它,或者(我想做)用几个div替换它,我得到了错误的格式.
这是Firefox的错误,还是我做错了什么,或者我的期望是不正确的?(FWIW,IE 7将它们全部平分,好像它不理解内联块;无所谓,这是一个内部应用程序.我只使用Firefox).我可以使用浮动/边距获得我想要的布局,但我不想这样做.
我有一个简单的列表,我用于水平菜单:
<ul>
<h1>Menu</h1>
<li>
<a href="/" class="selected">Home</a>
</li>
<li>
<a href="/Home">Forum</a>
</li>
</ul>
Run Code Online (Sandbox Code Playgroud)
当我为所选类添加背景颜色时,只有文本获得颜色,我希望它拉伸该部分的整个距离.
希望这是有道理的.