HTML CSS溢出无法正常工作

Question

！[在此输入图像说明] [1]我想在文字后面做一个水平线。

它不会隐藏离开div（#line）的内容，而是根本不显示它。 #line div必须大于#textline div，因为我不知道文本div的大小。

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

把#line {width：100;}放到我想要完成的事情上。

编辑:(我想要的是，标题会改变）：

Answer 1

删除容器元素的宽度。

Demo

<强> 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而另一个，该行将覆盖所有容器，文本将隐藏该行的某些部分。