你好我正在一個項目，我需要使用錨標記與文本和圖像，我已經使用ul標記，但問題是我想右對齊圖像，並左對齊裏面的文字。常見的寬度跨度文本

這裏是我的代碼

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

但輸出currenty是

My Text [Image] 
My [Image]

來源

2013-08-22 Mani

它更改爲：

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

<span>是一個內聯元件，所以寬度不會申請。當您將其設置爲display: inline-block;時，它將應用。

來源

2013-08-22 10:47:52 tobspr

感謝兩種寬度已經解決了這個問題 – Mani

這是因爲默認情況下<span>標記是內聯元素。您可以通過添加

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

來源

2013-08-22 10:48:19 jukempff

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

} 

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

使用上面的樣式改變這一點。

來源

2013-08-22 10:48:22

使用浮動：左和float：右

.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

來源

2013-08-22 10:49:48

HTML

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

CSS

#image { 
    float:right; 
    }

來源

2013-08-22 10:51:30 SaturnsEye

沒有評論的答案是不是真的有用。 – Sumurai8

沒有想到的評論並不是真的有必要。這爲解決這個問題提供了一種可能的方法，它只需要更多的東西。 – SaturnsEye

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

而且你爲什麼decalred在.button-no-record a span

來源

2013-08-22 10:55:02

常見的寬度跨度文本

回答

demo

相關問題