html - 使 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为 inline-block 是一种方法：

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

之后不要忘记清除它:)