【问题标题】:Putting margins between Buttons在按钮之间放置边距
【发布时间】:2014-11-16 22:33:10
【问题描述】:

我想在这四个Buttons 之间放置边距/间距。我在 css 上有点挣扎。以下代码没有给我每个Button 之间的空间。有谁知道我需要改变什么?

练习.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>

练习.css

.button{
    margin: 20px;
}

【问题讨论】:

  • 只删除.button{}中的点,而不是写button{ margin: 20px;}

标签: html css button margins


【解决方案1】:

.button 负责类。你应该写

button {margin: 20px;}

就是这样:)。请记住,按钮应该有 display: block 或 display: inline-block,这样元素才能正确呈现 margin 属性。


不同 CSS 选择器的示例:

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

【讨论】:

    【解决方案2】:

    为每个按钮添加 class="button":

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

    【讨论】:

    • 由于某种原因无法正常工作。如果按钮被包裹在一个 div 中,上面的代码会不起作用吗?
    • 在输入元素中放入 margin:20px 是否有效?即:
    • 是的。你知道为什么它会这样工作而不是在 css 文件中吗?
    • 将此添加到您的 元素下:
    【解决方案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>

    从您的 cmets 看来,似乎从某个地方应用了另一种样式。您可能需要制作更多 specific 选择器。

    试试

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

    还可以使用 Chrome 开发者工具或 Firebug for Firefox 检查按钮,以查看您的按钮应用了哪些样式。不要忘记刷新缓存 (ctr +f5),因为 CSS 会被浏览器缓存。

    更多关于开始使用CSS Selectors的信息

    【讨论】:

    • 不工作。如果这 4 个按钮包含在
      中,我是否需要更改某些内容?
    • 不,如果它不起作用,则有一些其他样式会覆盖该样式。使用 Chrome 开发人员工具检查按钮并查看正在应用的样式。我已经更新了 wo 中的 sn-p 将按钮包装在 div 中以进行演示。
    猜你喜欢
    相关资源
    最近更新 更多
    热门标签