开发者

How to fit two inline elements to the body width?

开发者 https://www.devze.com 2022-12-11 08:52 出处：网络

<html> <head> <title>Title</title> &开发者_JS百科lt;style type=\"text/css\">

相关专题：css inline

<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.