【问题标题】:List-element "dots" end up outside section element列表元素“点”最终在节元素之外
【发布时间】:2012-07-06 03:05:09
【问题描述】:

我正在创建一个由<section> 标签包裹的<ul> 和<li>。除了我的<section> 标记之外的列表样式(点)显示之外,一切正常。我不确定为什么。如果有人可以分享提示,我将不胜感激。非常感谢。

我的html

<section id='test'>
    <ul>
       <li>line 1 jiofjisojfoisdjfoisjfio</li>
       <li>line 2 jiofjisojfoisdjfoisjfio</li>
       <li>line 3 jiofjisojfoisdjfoisjfio</li>
       <li>line 4 jiofjisojfoisdjfoisjfio</li>
       <li>line 5 jiofjisojfoisdjfoisjfio</li>
       <li>line 6 jiofjisojfoisdjfoisjfio</li>
       <li>line 7 jiofjisojfoisdjfoisjfio</li>
   </ul>

</section>

CSS

section { 

    display: block;
    width: 1200px;
    margin: 50px auto;
    border: 3px solid red;

}

它是这样显示的..

 ----------------------
*| line 1 jioj..       |
*| line 2 jiof..       |
*| line 3 jiof..       |
*| line 4 jiof..       |
*| line 5 jiof..       |
*| line 6 jiof..       |
 -----------------------

黑点在节标签之外。

【问题讨论】:

  • 你的浏览器是什么。 chrome显示它很好jsfiddle.net/8WQDY
  • 我也用过 Chrome,太奇怪了。我在 jsfiddle 上使用相同的代码。它给了我这个jsfiddle.net/y8DLg,但你的在我的屏幕 Rab 上显示得很好。
  • @FlyingCat 你需要取消选中 JSFiddle 上的 Normalized CSS 复选框,至少我一开始错过了。
  • 好的,它在 jsfiddle 中正确显示,但我的代码在 chrome 中显示不正确。
  • 如果您将所有代码和 CSS 添加到小提琴中,它是否仍然可以正常显示?

标签: html css


【解决方案1】:

显示它很好DEMO

保持取消选中 JSFiddle 上的 Normalized CSS 复选框

【讨论】:

  • 您愿意解释一下标准化 css 的作用吗?
  • This SO question 解释规范化 css 选项。
  • 该小提琴将使用 normalize.css 呈现,这将删除许多 HTML 标记的大部分浏览器样式。
  • @Rab,谢谢你的回答,但我的问题仍然没有解决:(。+1
  • 我认为已经解决了。您需要覆盖浏览器默认样式。
猜你喜欢
  • 1970-01-01
  • 2019-07-27
  • 1970-01-01
  • 1970-01-01
  • 2014-10-30
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-03-11
相关资源
最近更新 更多