使用显示属性时如何为内部 div 元素设置固定宽度答案

【问题标题】：How do I set a fix width to an inner div-element when using display properties使用显示属性时如何为内部 div 元素设置固定宽度
【发布时间】：2011-06-12 11:59:53
【问题描述】：

我正在寻找一处房产，

将内部 div 元素水平居中
将内部 div 元素的宽度设置为 40 像素的固定宽度

我尝试关注它是否有效。我使用了display:table 和display:table-cell，因为其中会有更多的表格单元格和表格行。这只是一个无效案例的示例。

当我使用宽度为 100% 的 display:table 时，我可以将内部 div 元素居中。这将是 (1) 的解决方案。

我的问题是第 (2) 点。我想要一个宽度为 40px 的表格单元格。目前内部 div 扩展到外部 div 的 100% 宽度。您可以通过查看this fiddle 来了解我的意思。数字周围的边框应该只有 40px 宽。

你知道如何解决它吗？

<div style="display:table;width:100%;height:47px;border:1px solid blue;text- align:center;">  
         <div style="display:table-cell;width:40px;height:47px;border:1px solid red"> 1</div> 
</div>

【问题讨论】：

如果您要显示表格数据，表格是完全合法的。不要害怕使用它们，只是不要将它们用于布局:)
我需要它来进行布局。恐怕没有其他方法可以设置它的样式。

标签： html css css-tables

【解决方案1】：

如果将其设置为像表格一样，它将像表格一样，如果只有一列，它将具有表格的宽度。

因此，您可以添加更多单元格来填充整个表格，或者摆脱表格布局并使用@Summer 的解决方案。

【讨论】：

所以没有办法设置单个表格单元格的宽度？
@qlib 有，但只有当有更多列并且其余的弥补剩余空间时。

【解决方案2】：

您可以在 HTML 中使用它：

<div class="wrapper">  
         <div class="inner"> 1</div> 
</div>

和 CSS：

.wrapper
{
   width:100%;
   height:47px;
   border:1px solid blue;
   text-align:center;
}

.inner
{  
   margin: 0 auto;
   width:40px;
   height:47px;
   border:1px solid red;
}

【讨论】：

问题是它将是一个包含更多表格单元格的表格。
好的，我们能看一个更扩展的例子吗？也许其他地方有问题:)

【解决方案3】：

为什么不：

div.inner {
 margin: 0 auto;
 width: 40px;
}

【讨论】：

不幸的是，它没有任何区别。我需要 display:table-cell 属性