晚上好。我需要有关CSS的帮助。我知道这个问题已经解决了很多次,但由于某些原因它似乎不适用于我的程序。 这个脚本是设计一个8x8板,板上的单元是8种不同颜色中的一种。所以我打算做的是定义一个以黑色背景为中心的div。在这个div中将是我的董事会。因为纵向和横向需要8个单元格,所以我将按钮的宽度和高度的相应属性设置为12.5%,即(100/8)%我没有指定任何显式填充,但仍然所有按钮都由一些关联(主要在右边)。
html,
body {
height: 100%;
width: 100%;
}
button::-moz-focus-inner
/*Recommended fix. But not working*/
{
border: 0;
padding: 0;
}
.c1 {
/*For coloring the buttons*/
background-color: #cdaf95;
}
/*Here is the code for classes c2 -c7*/
.c8 {
background-color: #5e2612;
}
.col1 {
/*For defining the size of the buttons.*/
width: 12.5%;
height: 12.5%;
padding: 0;
border: 0;
}
/*Here is code for classes col2-col7*/
.col8 {
width: 12.5%;
height: 12.5%;
padding: 0;
border: 0;
}
/*Board is the id of the division*/
#board {
height: 50%;
width: 50%;
top: 0;
bottom: 0;
left: 0;
right: 0;
max-width: 400px;
max-height: 400px;
position: absolute;
margin: auto;
background-color: white;
}
<body bgcolor="black">
<style>
</style>
<div id="board">
<button class="col1 c1"></button>
<button class="col2 c1"></button>
<button class="col3 c1"></button>
<button class="col4 c1"></button>
<button class="col5 c1"></button>
<button class="col6 c1"></button>
<button class="col7 c1"></button>
<button class="col8 c1"></button>
<button class="col1 c2"></button>
<button class="col2 c2"></button>
<!--And so on upto c8. Thats a total of 64 buttons forming an 8x8 board-->
<button class="col7 c8"></button>
<button class="col8 c8"></button>
</div>
</body>
非常感谢以这种方式提供任何帮助。提前感谢你。
答案 0 :(得分:1)
像这样更新您的HTML:
<body bgcolor="black">
<div id="board">
<button class="col1 c1"></button><button class="col2 c1"><!--
--></button><!--
--><button class="col3 c1"></button><!--
--><button class="col4 c1"></button><!--
--><button class="col5 c1"></button><!--
--><button class="col6 c1"></button><!--
--><button class="col7 c1"></button><!--
--><button class="col8 c1"></button><!--
--><button class="col1 c2"></button><!--
--><button class="col2 c2"></button><!--
--><button class="col7 c8"></button><!--
--><button class="col8 c8"></button>
</div>
</body>
只需添加
<!-- -->
之间的
<button></button>
确保是这样的
<button></button><!-- --><button></button>
不
<button></button> <!-- --><button></button>
<button></button><!-- --> <button></button>
答案 1 :(得分:0)
您可以使用此功能删除所有项目的填充
*{
padding:0;
margin:0;
}
答案 2 :(得分:0)
一种可能的解决方案:
/* just instead of writing 64 tags in a single row */
document.body.onload = function() {
var out = '';
for(var i=1; i<=8; i++)
for(var j=1; j<=8; j++)
out += '<button class="col'+j+' c'+i+'"></button>';
document.getElementById('board').innerHTML = out;
}
html,
body {
height: 100%;
width: 100%;
}
button {
width: 12.5%;
height: 12.5%;
/* make sure that padding/border doesn't add up to dimensions */
box-sizing: border-box;
/* remove vertical spaces between lines */
vertical-align: bottom;
}
button::-moz-focus-inner
/*really needed and working*/
{
border: 0;
padding: 0;
}
.c1 {
/*For coloring the buttons*/
background-color: #cdaf95;
}
/*Here is the code for classes c2 -c7*/
.c8 {
background-color: #5e2612;
}
.col1 {
padding: 0;
border: 0;
}
/*Here is code for classes col2-col7*/
.col8 {
padding: 0;
border: 0;
}
/*Board is the id of the division*/
#board {
height: 50%;
width: 50%;
top: 0;
bottom: 0;
left: 0;
right: 0;
max-width: 400px;
max-height: 400px;
position: absolute;
margin: auto;
background-color: white;
/* make minimum height of lines of buttons as small as possible */
line-height: 1px;
}
<body bgcolor="black">
<style>
</style>
<div id="board">
</div>
</body>
主要技巧是删除标签间空白字符,包括换行符(如前所述),并使默认行高低于按钮的高度(因为它们表现为内嵌 - 块元素,它们不能使线低于其默认高度,只能更高。)
但使用Flexbox进行此布局不是更好吗?