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; 

再次单击，将删除该类，并间接从元素中删除填充！

这是导致问题的原因，将其删除！ 您的问题将得到解决！

删除后，该元素将不再移动！