Question

我想在这四个Buttons中的每一个之间加上边距/间距。我和css有点挣扎。以下代码不会在每个Button之间给出空格。有谁知道我需要改变什么？

practice.html

<div>
    <input type="button" id="button0" style="color:black; width:100px; height: 50px" />    
    <input type="button" id="button1" style="color:black; width:100px; height: 50px"  />
    <input type="button" id="button2" style="color:black; width:100px; height: 50px"  />    
    <input type="button" id="button3" style="color:black; width:100px; height: 50px" />
</div>

practice.css

.button{
    margin: 20px;
}

Answer 1

.button负责上课。你应该写

button {margin: 20px;}

多数民众赞成:)。请记住，按钮应该有display：block或display：inline-block，因此元素可以正确渲染margin属性。

不同CSS选择器的示例：

button {} // <button>
.buttonclass {} // <button class="buttonclass">
#buttonid {} // <button id="buttonid">

Answer 2

为每个按钮添加class =“button”：

<input class="button" type="button" id="button0" style="color:black; width:100px; height: 50px" />

Answer 3

.button是一个类选择器，您没有设置类。作为选择器的button将无法使用给定的HTML，因为元素为input。正确的CSS将是

input[type="button"]
{
    margin:20px;
}

input[type="button"] {
  color: black;
  width: 100px;
  height: 50px;
  margin: 20px;
}

<div>
  <input type="button" id="button0" />

  <input type="button" id="button1" />
  <input type="button" id="button2" />

  <input type="button" id="button3" />
</div>

从您的评论中可以看出，某个地方正在应用另一种风格。您可能需要制作更多specific选择器。

尝试

div input[type="button"]
{
    margin:20px;
}

还可以使用Chrome开发者工具或Firebug for Firefox检查按钮，以查看正在应用于按钮的styes。不要忘记刷新缓存（ctr + f5），因为浏览器会缓存CSS。

有关CSS Selectors

入门的更多信息

在按钮之间设置边距

3 个答案: