首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >跨度上的内联块

跨度上的内联块
EN

Stack Overflow用户
提问于 2019-03-04 00:38:57
回答 2查看 0关注 0票数 0

我希望下面示例中的两个span标签彼此相邻显示,而不是一个在另一个下面显示。如果我将类span.right的宽度设置为49%,它们会彼此相邻显示。我无法弄清楚为什么右侧跨度被推下来,因为右侧跨度有一些看不见的填充/边距,这使得它需要超过50%。我试图在不使用html表的情况下完成此操作。有任何想法吗?

<html>
<head>
    <title>Test Page</title>
    <style type='text/css'>
        * {
            margin: 0;
        }

        html,body{
            margin:0;
            padding:0;
            height:100%;
            width:100%;
            border:none;
        }

        div.header{
            width:100%;
            height:80px;
            vertical-align:top;
        }

        span.left {
            height:80px;
            width:50%;
            display:inline-block;
            background-color:pink;
        }

        span.right {
            vertical-align:top; 
            display:inline-block;
            text-align:right;
            height:80px;
            width:50%;
            background-color:red;
        }
    </style>
</head>
<body>
    <div class='header'>
        <span class='left'>Left Span 50% width</span>
        <span class='right'>Right Span 50% width</span>
    </div>
</body>
</html>

感谢您的解释。float:left与FF 3.1中的预期结果完美配合。不幸的是,在IE6中,右侧跨度呈现50%的50%,实际上使其宽度为浏览器窗口的25%。将其宽度设置为100%可实现所需的结果,但在符合标准的FF 3.1中会中断,我理解这一点。让它在FF和IE 6中工作,而不是诉诸黑客或使用多个CSS表一直是一个挑战

EN

回答 2

Stack Overflow用户

发布于 2019-03-04 08:49:21

float: left;

尝试将其添加到span.left

它会使它向左浮动(如语法所示)。

我不是一个CSS专家,所以请不要把它当作无可争辩的事实,但我发现当某些东西浮出水面时,它对下面的东西的垂直位置没有任何影响。

如果你将span.right浮动到右边然后在它们下方添加文本你应该得到一些有趣的结果,要停止这些“有趣的结果”你可以使用“clear:left / right / both”这将导致具有清晰样式的块在任何浮动到左/右/两者的任何东西下。W3Schools也有这个属性的页面。

欢迎来到Stackoverflow。

票数 0
EN

Stack Overflow用户

发布于 2019-03-04 10:31:24

这是因为内联块和内联块在元素之间包含空格(在您的情况下是换行符)。在您的情况下,元素的组合宽度为50%+ 50%+空白> 100%。

您应该将这两个元素放在HTML文档的同一行(没有空格)

<div class='header'>
    <span class='left'>Left Span 50% width</span><span class='right'>Right Span 50% width</span>
</div>

或者使用HTML评论

<div class='header'>
        <span class='left'>Left Span 50% width</span><!--
     --><span class='right'>Right Span 50% width</span>
</div>

我自己更喜欢后者。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/-100000993

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档