为什么我不能使用 CSS 来移动按钮？答案

【问题标题】：Why can't I use CSS to move button?为什么我不能使用 CSS 来移动按钮？
【发布时间】：2015-04-25 08:01:23
【问题描述】：

这是我的代码，我无法使用 'button {margin-top:10px} 对其进行样式设置

<input type="text"></input><button type="button"><img src="searchlogo.png" id="search"></button>

它没有与文本输入对齐？有什么建议吗？

【问题讨论】：

'button {margin-top: 10px}' 任何边距都不起作用
您是否正确包含了 css 文件？ position 的值是多少？您在 webconcole 中遇到任何错误吗？也许添加一些你尝试过的 css，也许你犯了一个错误。
在 jsfiddle 或 codepen 中重现问题
css 链接正确，我用来设置页面上其他元素的样式。
我改变了位置值，你有什么建议？

标签： html css button input

【解决方案1】：

要了解保证金如何运作，请参阅demo

CSS

    .b1{
    background:orange;
    color:white;
    border:none;

}

.b2{
    background:orange;
    color:white;
    border:none;
   margin-top:100px;
}

HTML

<input type="text"></input><button class="b1">Button Title</button>
<br/>
<input type="text"></input><button class="b2">Button Title</button>
<br/>
<input type="text"></input><button class="b1">Button Title</button>

【讨论】：

也许我应该给它一个类而不是选择所有按钮？

【解决方案2】：

我怀疑你在你的 css 某处有一个覆盖规则，它阻止你的 css 代码做你打算做的事情。

您应该指定要在其上实现边距的元素，而不是为 margin-top: 10px; 规则广泛调用 button。

试试这个：

在您的 HTML 上：

<button class="my-button"><img src="image.jpg" alt="image" /></button>

在你的 CSS 上：

button.my-button { margin-top: 10px; }

【讨论】：

【解决方案3】：

<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" CssClass="button" />

<head runat="server">
<title></title>
<style type="text/css">

     .button
     {
         margin-top: 20px;
     }
    </style>

【讨论】：