HTML 按钮被放置在我的文本下方？

Question

我有我的 HTML 代码:

<div class="container">

    <button onclick="IndexButton()" style="background: url(images/viewmessages.png);"/>

    <h1>Post a Message</h1>

    <label for="mes" class="col-lg-2 control-label">Message</label>
    <input id="MessageBox" type="text">

    <label for="name" class="col-lg-2 control-label">Name</label>
    <input id="name" type="text">

    <button id="button" onclick="setMessage()" style="background: url(images/submit.png);" />

    <label for="add" class="col-lg-2 control-label">Address</label>
    <input id="add">

    <label for="pass" class="col-lg-2 control-label">Password</label>
    <input id="pass">

    <p id="status"></p>
    <button id="unlock" onclick="ButtonPress()" style="background: url(images/unlock.png);" />
</div>[![enter image description here][1]][1]

我不知道出了什么问题我的按钮被放置在我的文本下面，而且太大了。

/image/yARdw.png

Answer 1

您正在使用的背景图像重复。在样式标签中添加“background-repeat:no-repeat”