css ul li標簽的對齊問題

Question

我正在使用以下代碼，

http://jsfiddle.net/wHdYH/

<div>
    <ul>
        <li class="hide">Code 1</li>
        <li class="hide">Code 2</li>
        <li class="hide">Code 3</li>
        <li class="hide">Code 4</li>
        <li class="hide">Code 5</li>
        <li class="hide">Code 6</li>
        <li class="hide">Code 7</li>
        <li class="hide">Code 8</li>
    </ul>
</div>

$(document).ready(function() {
   $(".hide").click(function(e) {   
        $(this).toggleClass("hideit");
   });
});

ul li.show {
    list-style: inside;
    padding-left: 15px;
    cursor: pointer;
    height:16px;
}
ul li.hideit {
    list-style: none;
    list-style-image: none;
    padding-left: 35px;
    cursor: pointer;
}

但是問題是當我單擊它時，文本會移到右側，然后再次單擊它會回到相同的位置

我正在嘗試的方式是當我單擊li時，列表樣式應該為空，但文本不應移動

我正在檢查IE7 +瀏覽器和所有OPera，Safari，FF，Chrome

問候

Answer 1

從hide-it刪除填充

ul li.hideit {
    list-style: none;
    list-style-image: none;
    cursor: pointer;
}

演示： 小提琴

Answer 2

只需從類hideit刪除padding hideit ：

ul li.hideit {
  list-style: none;
  list-style-image: none;
  /*padding-left: 35px; Remove this*/
  cursor: pointer;
} 

演示http://jsfiddle.net/wHdYH/1/

Answer 3

刪除padding-left: 35px; 從您關於ul li.hideit的規則中

jsFiddle示例

Answer 4

單擊后，將向該元素添加一個類！ hideit 。

在那堂課上

padding-left: 35px; 

再次單擊，將刪除該類，並間接從元素中刪除填充！

這是導致問題的原因，將其刪除！ 您的問題將得到解決！

刪除后，該元素將不再移動！