demo

Question

您好我正在处理一个项目，我需要使用带有文本和图像的锚标记，我已经使用了ul标签，但问题是我想对齐图像并将文本左侧对齐LI。< / p>

这是我的代码

<div class="button-no-record">
<ul>
<li><a href="#"><span>ADD NEW</span><img src="images/add_enabled.gif"></a></li>
</ul>

和css

.button-no-record ul {
display:table-cell;
vertical-align:middle;
}
.button-no-record li{
list-style-type:none;
display:inline-block;
margin-top:10px;
margin-left:5px;
vertical-align:middle;
line-height:29px;
height:29px;
width:103px;
border-radius:8px;
background:#e4e4e4;
color:black;
font-family:Arial;
font-size:.9em;
font-weight:bold;
}



 .button-no-record a span {
width:100px;
overflow:hidden;
margin-left:4px;
color:black;
vertical-align:middle;
 }
 .button-no-record a img{
vertical-align:middle;
 }

我想要这样的输出

My Text   [Image]
My        [Image]

但当前它是

My Text [Image]
My [Image]

Answer 1

将其更改为：

.button-no-record a span {
display: inline-block;
[...]

<span>是一个内联元素，因此宽度不适用于它。当您将其设置为display: inline-block;时，它将适用。

Answer 2

这是因为默认情况下<span>标记是内联元素。您可以通过添加

来更改此设置

.button-no-record a span {
    display: inline-block;
    /* dirty IE7 hack (only if needed) */
    *display: inline;
    zoom: 1;
}

Answer 3

.button-no-record ul li span
{
float: left;
width: 200px;

}

.button-no-record ul li img
{
float: right;
}

使用上述风格。

Answer 4

使用float：left和float：right

.button-no-record a span {
width:100px;
overflow:hidden;
margin-left:4px;
color:black;
width:40px;
vertical-align:middle;
float: left;
 }

.button-no-record a img{
vertical-align:middle;
float: right;
 }

demo

Answer 5

HTML

<img id="image" src="images/add_enabled.gif">

CSS

#image {
    float:right;
    }

Answer 6

将display:block添加到.button-no-record a span

另外，为什么要在.button-no-record a span

中声明两个宽度

常用宽度以跨越文本

6 个答案:

demo