CSS布局问题

我继承了一个代码库。我需要在网页中添加一个div：

• 以,
• 所有内容都是水平（而不是垂直）堆叠的

目前，我有

<div style="background-color:silver; padding:8px; text-align:center;">
    <input type='text' value='birth date'/>

    <select>
        <option>Male</option>
        <option>Female</option>
    </select>
    <input type="checkbox" value="Is New?" />
</div>

男性的
女的

渲染此内容时，银框是整个屏幕的宽度。但是，我只希望它是内容的宽度，边缘和控件之间有8px的填充。然后我想让div居中。我做错了什么

---

谢谢大家!

为div设置一个宽度值，并自动设置边距，如下所示：

<div style="background-color:silver; margin: auto; width: 250px; padding: 8px;">

编辑：

你可以这样做：

<div style="text-align:center;padding:8px;">
    <span style="background:silver;padding:8px;">
        <input type='text' value='birth date'/>
        <select>
            <option>Male</option>
            <option>Female</option>
        </select>
        <input type="checkbox" value="Is New?" />   
    </span>
</div>

男性的
女的

您正在哪个浏览器中查看它？但是，我不确定div的内容有多宽。有没有办法使它动态？这工作，但不幸的是它是易碎的：考虑这（在Chrome好）与此。根据使用的字体，工作模式甚至可能不是跨浏览器（或跨操作系统）。