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

display:blockに追加.button-no-record a span

また、なぜ2つの幅をデカールにしたのですか.button-no-record a span

于 2013-08-22T10:55:02.457 に答える
0

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

デモ

于 2013-08-22T10:49:48.433 に答える