Question

我正在努力创建一个为网站创建设计的网站。它会告诉您制作网站所需的代码。我有一个工具栏div包含一个带有6个按钮的表。当我尝试在工具栏div中向下按下按钮时，它会向下移动div，并且按钮仍然在div的顶部向下几十个像素。这是我的代码：

＆＃13;

.toolbar {
  width: 200px;
  height: 300px;
  background-color: #444444;
}
#a {
  height: 50px;
  width: 150px;
}

＆＃13;

<div class='toolbar'>
  <center>
    <table class='tools' id='a'>
      <tr>
        <td>
          <button class='text' id='a'>
            Add text
          </button>
        </td>
      </tr>
      <tr>
        <td>
          <button class='image' id='a'>
            Add image
          </button>
        </td>
      </tr>
      <tr>
        <td>
          <button class='table' id='a'>
            Add table
          </button>
        </td>
      </tr>
      <tr>
        <td>
          <button class='jsbutton' id='a'>
            Add button
          </button>
        </td>
      </tr>
      <tr>
        <td>
          <button class='addons' id='a'>
            Add-ons
          </button>
        </td>
      </tr>
    </table>
  </center>
</div>

＆＃13;

这段代码有什么问题，还是我的要求不可能？

Answer 1

您正在寻找.webm，而不是padding。边距在div之外偏移，填充在div内部偏移。像这样的东西会按下按钮：

margin

这可能有助于理解盒子模型：http://www.w3schools.com/css/css_boxmodel.asp

Answer 2

请检查此链接。我希望这会对你有所帮助。

http://codepen.io/rajeshwarpatlolla/pen/jqbmgj

.toolbar {
  padding-top: 20px;
  width: 200px;
  height: 300px;
  background-color: #444444;
}

Answer 3

这是您使用832.427 ms和padding的方式，然后放弃margin toolbar。

通过在height上设置padding，按下所有按钮，并在每个toolbar上使用margin，它们会分开。

我将表格更改为button，将display: inline-table;添加到text-align: center;，使其居中（因为toolbar元素已被弃用），我也是放弃了<center>，因为它们应该是唯一的。

＆＃13;

id

＆＃13;

.toolbar {
  padding-top: 10px;
  width: 200px;
  background-color: #444444;
  text-align: center;
}
.tools {
  display: inline-table;
}
.tools, .text, .image, .table, .jsbutton, .addons {
  margin-bottom: 6px;
  height: 50px;
  width: 150px;
}

＆＃13;

Answer 4

你可以使用填充来控制内容和盒子边框之间的空间。

.toolbar {
  width: 200px;
  height: 300px;
  background-color: #444444;
  padding-top:10px;
}
#a {
  height: 50px;
  width: 150px;
  padding:10px;
}

Div降低而不是按钮

4 个答案: