Question

晚上好。我需要有关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>

非常感谢以这种方式提供任何帮助。提前感谢你。

Answer 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>

见这里：https://jsfiddle.net/4vn4pv18/

Answer 2

您可以使用此功能删除所有项目的填充

*{    
    padding:0;
    margin:0;
}

Answer 3

一种可能的解决方案：

/* 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进行此布局不是更好吗？

按钮周围不需要的填充。 CSS

3 个答案: