-1

我在这里阅读了应用建议的 CSS 的答案来解决这个问题。但这对我没有帮助。

如何删除此填充？

还有怎么加空间？

HTML 和 CSS 给了我这个输出：-

在此处输入图像描述 

#page {
  border: 0px;
  border-collapse: collapse;
  border-spacing: 0px;
}

#page td {
  padding: 0;
  margin: 0;
}
Hello world <br/>

<table id="page">
  <tr>
    <td align="left"><input type='button' value='button1'></td>
    <td align="left"><input type='button' value='button2'></td>
    <td align="left"><input type='button' value='button3'></td>
    <td align="left"><input type='button' value='button4'></td>
  </tr>
  <tr>
    <td align="left"><input type='button' value='Sort Name A-Z'></td>
    <td align="left"><input type='button' value='Save sorting'></td>
  </tr>
</table>

4

2 回答 2

3

要使按钮大小相同，请强制它们占据特定宽度（在我的示例中，为可用宽度的 98%）以创建“填充”，使它们小于整个可用宽度并将它们居中（请注意 cssvertical-align是在不推荐使用的align属性上对齐 td 的推荐方法

#page {
  border: 0px;
  border-collapse: collapse;
  border-spacing: 0px;
}

#page td {
  padding: 0;
  margin: 0;
  vertical-align: center
}

input[type="button"] {
  width: 98%;
}
Hello world <br/>

<table id="page">
  <tr>
    <td align="left"><input type='button' value='button1'></td>
    <td align="left"><input type='button' value='button2'></td>
    <td align="left"><input type='button' value='button3'></td>
    <td align="left"><input type='button' value='button4'></td>
  </tr>
  <tr>
    <td align="left"><input type='button' value='Sort Name A-Z'></td>
    <td align="left"><input type='button' value='Save sorting'></td>
  </tr>
</table>

于 2019-10-29T13:06:55.353 回答
0

有很多方法可以做到这一点。这是一个例子。首先我决定表格的大小，然后进行输入width:100% ，最后添加一个margin-left.

#page {
   border:0px;
   border-spacing:0px;

}

#page td {
   padding: 0; 
   margin: 0;
}
  
  /*Makes all the inputs 100% width and add a margin*/
  input {
    width: calc(100% - 20px);
    margin-right: 20px;
  }
  
  /*Define a size for the table*/
  table {
    width: 600px;
  }
<html>
<header><title>This is title</title></header>

<body>
Hello world <br/>

<table id="page"  >
    <tr>
        <td align="left"><input type='button' value='button1' ></td>
        <td align="left"><input type='button' value='button2' ></td>
        <td align="left"><input type='button' value='button3' ></td>
        <td align="left"><input type='button' value='button4' ></td>
    </tr>
    <tr>
        <td align="left"><input type='button' value='Sort Name A-Z'></td>
        <td align="left"><input type='button' value='Save sorting' ></td>
    </tr>
</table>
</body>

于 2019-10-29T13:10:47.897 回答