代码之家  ›  专栏  ›  技术社区  ›  darasd

无法使3列布局在IE7的列表中工作

css html
  •  0
  • darasd  · 技术社区  · 16 年前

    我试图在列表项中创建一个液体3列区域。为了实现这一点,我使用了标准的方法,有三个元素,其中前两个元素是边,左右浮动,第三个元素是内容,应该位于两个元素之间。下面的HTML在Firefox中可以正常工作,但在IE7中不能正确呈现-内容在两个浮动元素下面呈现。有什么问题吗? 

    <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <style>
        *
        {
            margin: 0;
            padding: 0;
            border: 0;
        }
        span
        {
            display:block;
        }
        .corner
        {
            width: 12px;
            height: 12px;
        }
        .tl
        {
            float: left;
        }

        .tr
        {
            float: right;
        }
        .fill
        {
            margin: 0px 12px;
        }
    </style>
  </head>
  <body>
    <ul>
      <li>
        <span class="tl corner">a</span>
        <span class="tr corner">b</span>
        <span class="fill">text text text</span>
      </li>
    </ul>
  </body>
</html>

    请注意,将跨度替换为divs会产生相同的效果。我也尝试过各种各样的病历,但运气不好。它在列表之外工作得很好,因此这个问题似乎是使用列表所固有的。

    4 回复  |  直到 16 年前
        1
  •  2
  •   random    16 年前

    依我看,你试图一个接一个地插队,但前两个已经占据了他们的空间,飘走了,留下了最后一个跨度在李为下一个层次而战,在IE中看起来像是下一个层次。

    由于最后一个跨度没有浮动,这也是为什么它会被敲到下一个水平。

    此外,跨度是内嵌样式,而不是块级元素。您应该将SPAN替换为DIV,是否仍要尝试在LI元素中设置此样式。

    您还应该使用完整的doctype,以便浏览器知道如何呈现页面。否则,它们将默认为怪癖模式,丑陋,到处都是。

    但更好的策略是在LI外部和DIV设置中创建3列的浮动。

    读一读 CSSplay 或 Max Design 关于创建3列布局。

        2
  •  0
  •   Erik    16 年前

    在看不到标记的情况下说任何东西都有点困难,但是为什么不把这两个元素放在内容元素中呢?您必须在内容元素上使用一些填充来进行调整,但这应该可以完成工作。再说一遍,不太确定你的意思。如果你给我们提供更多的标记,就更容易知道了。

        3
  •  0
  •   Trevor Bramble    16 年前

    中心块两侧应留有空白,以便为浮动块留出空间。

        4
  •  0
  •   darasd    16 年前

    答案是将跨度包装在一个块级元素(例如,DIV)中,并将溢出设置为隐藏。示例来自对第二个CSSPlay示例的更深入了解。

    推荐文章
    Jamie  ·  在CSS链接的文件名中添加Jinja占位符
    5 月前
    Mass  ·  如何在Tailwind CSS v4中创建配置
    5 月前
    magenta placenta  ·  将css变量合并为一个变量
    5 月前
    ptownbro  ·  重叠分区标签,同时保持以下所有分区和内容就位
    5 月前
    Luke Frost IEng MIMechE  ·  Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示
    5 月前
    user29519291  ·  为不同的变量创建一个带有可重用Click函数的简单菜单
    6 月前
    john Rizzo  ·  按钮背景颜色、悬停和活动状态存在问题
    6 月前
    Ben Halicki  ·  带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列
    6 月前
    Luckkks  ·  过渡色工作不正常
    6 月前
    ModernEraCaveman  ·  如何对齐我的Bootstrap容器以适应网页的整个宽度?
    6 月前
    关于  
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号