0

你好我正在做一个项目，我需要使用带有文本和图像的锚标签，我使用了 ul 标签，但问题是我想右对齐图像并左对齐 LI 内的文本。

这是我的代码

<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]
4

6 回答 6

1

将其更改为：

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

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

于 2013-08-22T10:47:52.380 回答
0

这是因为<span>标签默认是一个内联元素。您可以通过添加来更改它

.button-no-record a span {
    display: inline-block;
    /* dirty IE7 hack (only if needed) */
    *display: inline;
    zoom: 1;
}
于 2013-08-22T10:48:19.083 回答
0 
.button-no-record ul li span
{
float: left;
width: 200px;

}

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

使用上述样式。

于 2013-08-22T10:48:22.177 回答
0

使用浮动：左和浮动：右

.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;
 }

演示

于 2013-08-22T10:49:48.433 回答
0

HTML

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

CSS

#image {
    float:right;
    }
于 2013-08-22T10:51:30.743 回答
0

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

还有为什么你在里面贴了两个宽度.button-no-record a span

于 2013-08-22T10:55:02.457 回答