Question

我试图在按钮中以相同的线条效果实现图像和文本。对于像div和p这样的其他标签，显示：内联工作非常好，但它似乎不适用于按钮标签。这是小提琴：

代码：

<button>
    <span class="astext">
        Next
    </span><img src="image/delete1.png" class="del" style="width:10px;height:10px"  />
</button>

我的css：

 img.del {
    display: inline-block;
    cursor: pointer;
    margin-right: 74%;
    position: relative;
    }
.astext {
    display: inline-block;
    text-align: left;
    margin-left: 10%;
}
button {
    width: 80px;
}

请注意：我确实想使用按钮标签，我知道浮动：右边会起作用，但这是最后一个选项，因为它看起来很奇怪但是......

Answer 1

margin-right: 74%;的{p> img.del会影响它。因为它太高了。它会打破界限。将其更改为margin-left: 10px; margin-right: 5%;

img.del {
    display: inline-block;
    cursor: pointer;
    margin-left: 10px;
    margin-right: 5%;
    position: relative;
    }

会让它看起来很好。

<强> Working Fiddle

Answer 2

margin-right: 74%;和img代码位置使这种情况发生。

将img标记移至span之前并删除margin-right:74%;

小提琴：https://jsfiddle.net/xfgjoo23/2/

Answer 3

删除<span>标记和margin-right: 74%将使它们在同一行。

如果你在文字和图片之间添加两个&nbsp会使它看起来更好：

＆＃13;

img.del {
    display: inline-block;
    cursor: pointer;
        position: relative;
    }
    .astext {
        display: inline-block;
        text-align: left;
        margin-left: 10%;
    }
    button {
        width: 80px;
    }

＆＃13;

<button>
    Next&nbsp;&nbsp;
    <img src="image/delete1.png" class="del" style="width:10px;height:10px" />
</button>

＆＃13;

Answer 4

https://jsfiddle.net/xfgjoo23/3/

<button>
    <span class="astext">
        Next
    <img src="image/delete1.png" class="del" style="width:10px;height:10px"  /></span>
</button>

css

span img{height:100%;}

我认为这是完成此操作的完美方式

Answer 5

<button >
    <img src="image/delete1.png" class="del" style="width:10px;height:10px"  />
    <span class="astext">
        Next
    </span>
</button>

 img.del {
    display: inline-block;
    cursor: pointer;
    position: relative;
    vertical-align: text-top;
    }
.astext {
    display: inline-block;
    text-align: left;
    margin-left: 10%;
    vertical-align: top;
}
button {
    width: 80px;
    padding: 10px;
}

图像和文本在按钮中的单行中通过css没有浮动

5 个答案: