Question

我在Opera中按照我想要的方式格式化列表时遇到了问题。我希望任何环绕的文本在第一行之后缩进一点，我在Firefox / Chrome / Safari中使用以下代码：

<ul>
<li><p style="text-indent: -2em; padding-left: 2em"> Long first item </p></li>
<li> Second list item </li>
</ul>

所以整个段落向右移动2em，第一行向左移动相同的量，产生我想要的效果：每行除了第一行缩进。

但是，在Opera中，这会导致第一个列表项目符号向左缩进。（文字按照我的意愿显示，只有子弹看起来不正确！）还有另一种方法可以得到我想要的东西吗？（这是Opera中的一个错误吗？在我看来，li元素内部元素的样式不应该影响子弹放置，但我对这些东西没有很深的了解......）

它查看了“list-style-position”，但没有用，因为我希望第二行文字缩进过去第一行。

感谢您的帮助！

Answer 1

这似乎适用于Firefox和Opera。我没有在其他浏览器中测试过。让我知道它是否适合你。

<style type="text/css">
      ul.mylist li p {position: relative; left: 2em; text-indent: -2em;}
   </style>
    <ul class="mylist">
      <li>
        <p>
          Long first item Long first item Long first item Long first itemLong first itemLong first item Long first item Long first item Long first item Long first itemLong first itemLong first itemLong first item Long first item Long first item Long first itemLong first itemLong first itemLong first item Long first item Long first item Long first itemLong first itemLong first itemLong first item Long first item Long first item Long first itemLong first itemLong first item
        </p>
      </li>
      <li>Second list item
      </li>
    </ul>

修改

我刚注意到使用此css时文本向右移出页面。我用以下方式修改了css以防止这种情况。它在Opera和Firefox中都有效。

ul.mylist li p {position: relative; left: 2em; text-indent: -2em; margin-right: 2em;}

而且......我刚刚在Chrome中查看过此内容。可悲的是，它无法在Chrome中运行。

编辑2：

是否需要<p>？我似乎无法使用<p>标记在所有浏览器中使用它。也就是说 - 以下代码在Opera，FF和Chrome中为我工作（没有<p>标记：

<style type="text/css"> ul.mylist {list-style-position: inside;} ul.mylist li {text-indent: -2em; position: relative; left: 2em; margin-right: 2em;} </style> <ul class="mylist"> <li> Long first item Long first item Long first item Long first itemLong first itemLong first item Long first item Long first item Long first item Long first itemLong first itemLong first itemLong first item Long first item Long first item Long first itemLong first itemLong first itemLong first item Long first item Long first item Long first itemLong first itemLong first itemLong first item Long first item Long first item Long first itemLong first itemLong first item </li> <li>Second list item long item long item Second list item long item long item Second list item long item long item Second list item long item long itemSecond list item long item long itemSecond list item long item long item </li> </ul>

如果您发现绝对需要<p>标记，我认为您可以考虑使用Conditional CSS分别调整有问题的浏览器CSS。

修改

哇！我正在对此进行大量修改。好吧 - 所以<p>标签不起作用的原因是因为默认情况下它是一个块元素。块元素自动设置为占用可用页面宽度的100％。因此 - 当通过list-style-position:inside;添加项目符号时，Firefox会在一行上呈现一个单独的项目符号，然后在下一行上显示一个段落。您可以修复此问题，以便通过使段落内联在Firefox以及Chrome和Opera中显示缩进。

<style type="text/css"> ul.mylist {list-style-position: inside;} ul.mylist li {text-indent: -2em; position: relative; left: 2em; margin-right: 2em;} ul.mylist li p {display: inline;} </style>

好的！我晚安了：）

Answer 2

您应该使用reset styles更正此问题。

我们的想法是为html元素的所有定义基线或通用样式。这样他们在所有浏览器中的行为都是一样的。从那里，您可以覆盖任何基线以满足您的样式需求。

列表中的CSS否定文本缩进 - Opera的子弹问题

2 个答案: