使CSS框和里面的HTML一样大

Question

给出以下代码示例：http://jsfiddle.net/YqTmV/，我如何使我在CSS中创建的框只有里面的HTML元素那么宽？

HTML:

<div class="login-region">
        <h1>Login</h1>
        <form id="login-form" action="login.php" method="post">
            <table>
                <tr>
                    <td>Username</td>
                    <td><input type="text" id="username" name="username"/></td>
                </tr>
                <tr>
                    <td>Password</td>
                    <td><input type="password" id="password" name="password"/></td>
                </tr>
                <tr>
                    <td></td>
                    <td><input type="submit" value="Submit"/></td>
                </tr>
            </table>
        </form>
    </div>

CSS：

.login-region {
    margin:200px auto;
    text-align:left;
    padding:15px;
    border:1px dashed #333;
    background-color:#eee;
}
h1 {
    font-size: 20px;
    margin: 5px;
    border: 
}

Answer 1

将.login-region的显示值更改为内联块是一种方法：

.login-region {
    display: inline-block;
    margin:200px auto;
    text-align:left;
    padding:15px;
    border:1px dashed #333;
    background-color:#eee;
}

http://jsfiddle.net/YqTmV/1/

Answer 2

最简单的方法是浮动外盒。

.login-region {
  float:left;
}

如果你想让它居中。。

position:relative;
left:50%;
margin-left:-Wpx; /* put half the box width on W */

之后不要忘记清除：）