Question

我正在尝试将文字和飞机的小图像插入提交按钮。不幸的是，文本在图像上重叠，我不知道如何对齐它。如何将文本“移动”到按钮右侧？还有更好的方法吗？感谢。

input[type="submit"] {
    width: 230px;
    height: 40px;
    border: none;
    background: url(../Images/Plane.png) #ff9900 no-repeat right;
    color: #fff;
    cursor: pointer;
}

这是HTML

<input type="submit" value="SEND" id="submitForm">

Answer 1

只需添加此属性：

text-align:right;

Answer 2

此问题有重复... HTML: How to make a submit button with text + image in it?

它的要点是图像应该是图像标签而不是背景标签，这会影响文本和图像的位置。尝试将背景图像更改为按钮内的图像标记，因为背景图像与文本分开，对我来说没有多大意义。

Answer 3

而不是尝试平衡padding和必需的对齐，如何使用<button>元素，可执行“按钮式”操作和包含其他（非-interactive）HTML实体：

<button type="submit" id="submitForm">
     <img src="../Images/Plane.png" /> Send
</button>

使用CSS：

#submitForm {
    width: 230px;
    height: 40px;
    border: none;
    background-color: #ff9900;
    color: #fff;
    cursor: pointer;
    text-transform: uppercase;
}

#submitForm img {
    float: right;
}

在提交按钮中插入图像和文本

3 个答案: