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

演示：Fiddle

Answer 2

只需从您的班级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 example

Answer 4

单击时，会向该元素添加一个类！ hideit。

对于那个班级，你正在使用

padding-left: 35px;

在重新点击时，该类被删除，并间接从元素中删除填充！

这是导致问题，删除它！你的问题将得到解决！

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

css ul li标签的对齐问题

4 个答案: