css - HTML CSS 溢出不起作用

Question

![在此处输入图片描述][1]我想在我的文字后面画一条水平线。

它没有隐藏从 div (#line) 出来的内容，而是根本不显示它。#line div 必须比#textlinediv 大，因为我不知道文本 div 的大小。

编辑：这是 Jfiddle http://jsfiddle.net/wakary/8tTzz/2/

放 #line {width: 100;} 看看我想要完成什么。

编辑：（我想要达到的，标题改变了）：

Answer 1

删除容器元素的宽度是可行的。

演示

HTML

<div id="textline">
    <div id="text">Text</div>
    <div id="line">
        <div id="upspace"></div>
        <div id="ll"></div>    
    </div>
</div>

CSS

#textline
{
    height: 36px;
    margin-left: 20px;

}
#text
{
    float: left;
    color: green;
    height: 36px;
}
#line
{
    float: left;
    height: 36px;
    width: 400px;    
}
#upspace
{
    height: 10px;
}
#ll
{
    height: 1px;
    background-color: green;
}

Answer 2

嗨，我对您的代码做了一些小改动

#textline{
position: relative;
width: 400px;
height: 36px;
margin-left: 20px;
overflow: hidden;
}
#text{
position: absolute;
color: green;
height: 36px;
background:white;
padding-right:10px;
}
#line{   
position: absolute;
height: 10px;
width: 80%;  
border-bottom: 1px solid green;
}

像这样的HTML

<div id="textline">
    <div id="line"></div>
    <div id="text">Text</div>
</div>

因此，在这种情况下，您将有一个 div 覆盖另一个，该行将覆盖它的所有容器，并且文本将隐藏该行的某些部分。