CSS在Safari / Firefox和Chrome中有所不同

Question

我在Chrome中遇到缩进格式的问题。我已将缩进设置为 -14px，以便文本对齐。这在Safari和Firefox开发人员版中工作正常，但在Chrome中似乎不起作用。Chrome 正在检测类和缩进，但它以某种方式需要 -30px 才能正确排列文本。

请参阅手风琴中的"Rubriky"部分以供参考：

http://marianrehak.cz/dcd/reseller-magazine-online/

你有什么建议吗？

Answer 1

您需要将列表位置属性设置为外部。默认情况下，项目符号将位于列表项的左侧，并带有缩进。所以list-style: outside;会解决这个问题。

.mytest {
  list-style: square outside;
}

<ul class="mytest">
  <li>bal 1</li>
  <li>bal 2 add her come lot of test so we get line wrap, add her come lot of test so we get line wrapadd her come lot of test so we get line wrap, add her come lot of test so we get line wrapadd her come lot of test so we get line wrap, add her come lot of test so we get line wrapadd her come lot of test so we get line wrap, add her come lot of test so we get line wrapadd her come lot of test so we get line wrap, add her come lot of test so we get line wrapadd her come lot of test so we get line wrap, add her come lot of test so we get line wrapadd her come lot of test so we get line wrap, add her come lot of test so we get line wrapadd her come lot of test so we get line wrap, add her come lot of test so we get line wrap</li>
  <li>bal 3</li>
  <li>bal 4</li>
  <li>bal 5</li>
  <li>bal 6</li>
  <li>bal 7</li>
  <li>bal 8</li>
  <li>bal 9</li>
  <li>bal 10</li>
  <li>bal 11</li>
</ul>