我目前正在使用 HTML/JS 开发一个数独解决应用程序。编程部分或多或少已经完成,但由于很少或没有网页设计经验,我的应用程序布局似乎搞砸了。
这是我的 CSS 样式:
body{
background-color: #faf8ef;
}
.container{
width: 436px;
margin:0px auto;
overflow: hidden;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing:border-box;
}
.heading_container{
width: 436px;
margin-bottom: 5px;
}
.heading_title{
width: 436px;
margin:0 auto;
text-align: center;
}
.heading_info{
width: 436px;
margin:0 auto;
text-align: center;
}
.main-grid{
width: 436px;
background-color: #bbada0;
border-radius: 2px;
padding: 3px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing:border-box;
clear:both;
}
.big-grid{
}
.small-grid{
width:43px;
height:43px;
border:1px gray;
border-radius:3px;
text-align: center;
font-size: 17px;
overflow: hidden;
}
这是我的 HTML 代码:
<div class="container">
<div class="heading_container">
<div class="heading_title"><span style="font-family:verdana; font-size: 50px; font-weight: bold">Sudoku Solver</span></div>
</div>
<table class="main-grid" cellspacing="2px">
...
</table>
</div>
以下是我在桌面和 Android 移动设备上运行它时发生的情况:
它在桌面上运行良好,但在我的 Android 上运行时,网格的右边缘似乎被切断了。我怀疑这是一个溢出问题,并尝试将宽度从 100% 更改为恒定像素宽度,但它似乎不起作用。任何帮助将不胜感激。谢谢!
附言请随意挑剔并建议对我的代码进行任何改进。我还是新手,所以我想更多地了解什么是完成任务的“最佳”方法!
最佳答案
正文有浏览器默认的边距。尝试通过指定重置它
body { margin: 0px; }
如果还是不行,移除 margin:0px auto 属性并设置边距
关于Android 上的 HTML 右边缘溢出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23427004/