html - Safari/Firefox 和 Chrome 中的 CSS 不同

Question

我在 Chrome 中遇到缩进格式问题。我已将缩进设置为 -14px，以便文本对齐。这在 Safari 和 Firefox Developer Edition 中运行良好，但在 Chrome 中似乎不起作用。 Chrome 正在检测类和缩进，但它需要 -30px 才能使文本正确排列。

请参阅 Accordion 中的“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>