0

<li>要素内のスパン テキストの配置に問題があります。Mozilla と Chrome では見栄えがしますが、IE では見栄えが悪くなります。

誰かが私を助けてくれませんか。

スタイルコードは次のとおりです。

ul#barcodesList > li
{
    list-style: none;
    margin-left: 20px;
    margin-right: 20px;
    border-collapse: separate;
    border-left: 1px solid #2557AD;
    border-right: 1px solid #2557AD;
    border-bottom: 1px solid #2557AD;
    color: #2557AD;
    height: 20px;
    background: #e7f0fe;
    cursor: pointer;
    padding-left: 12px;
    padding-top: 6px;
 }

 ul#barcodesList > li > span
 {
    float: right;
    color: #FF6A6A;
    display:block;
 }

 ul#barcodesList > li > span:hover
 {
     display:block;
     color: red;
 }

そしてHTML：

<ul id="barcodesList">
<li>00015<span class="deleteButton">Delete</span></li>
<li>RA075605345SI<span class="deleteButton">Delete</span></li>
<li>110002067 20130200<span class="deleteButton">Delete</span></li>
<li>PP2013001200<span class="deleteButton">Delete</span></li>
<li>PP2013001201<span class="deleteButton">Delete</span></li>
<li>PP2013001202<span class="deleteButton">Delete</span></li>
</ul>

これはその構築方法です（jQuery）：

        $(function () {
            $.each(barcodes, function(key, value) {
                $("#barcodesList").append("<li>" + key + "</li>");
            });

            deleteButton = $('<span />').addClass('deleteButton').text('Delete');
            $('ul#barcodesList li').append(deleteButton);
...

そしてその効果（右がIE、左がChrome）

ここに画像の説明を入力

前もって感謝します。

4

2 に答える 2

1

私は似たようなものを持っていますが、それは私にとってはうまくいきます。彼女は私のコードです：

<style type="text/css"> 

.divfab {
float:right;
align:right;}
</style> 


<ul>
<li><a href="index.php?lang=en" >Leftsided Text 1 <div class="divfab" align="right">Error 1</div></a></li>
<li><a href="index.php?lang=en" >Leftsided Text 2 <div class="divfab" align="right">Error 2</div></a></li>
<li><a href="index.php?lang=en" >Leftsided Text 3 <div class="divfab" align="right">Error 3</div></a></li>
<li><a href="index.php?lang=en" >Leftsided Text 4 <div class="divfab" align="right">Error 4</div></a></li>
</ul>

IE8、FF20、Chrome Opera 12 でのテスト

たぶんこれが役立ちます

于 2013-07-19T11:35:09.077 に答える