How to fit two inline elements to the body width?
<html>
<head>
<title>Title</title>
&开发者_JS百科lt;style type="text/css">
#container {
position: relative;
}
#line {
border-bottom: thin solid gray;
display:inline-block;
position:relative;
bottom: 1ex;
width:90%;
}
</style>
</head>
<body>
<div id="container">
<span id="title">Title</span>
<span id="line"></span>
</div>
</body>
</html>
How do i make that the width of span "line" to be equal with the width of "container" minus width of the span "title"?
Edit
The width of the "title" to be decided by the text inside the "title".
The easy answer is to give #title a width. For example, if you assign #title a width of 10%, than your problem is over (as you've already assigned #line a width of 90%). The not so easy answer is to use JavaScript to calculate the widths.
加载中,请稍侯......
精彩评论