显示属性 - 具有内联宽度的块行为答案

【问题标题】：Display property - Block behavior with inline width显示属性 - 具有内联宽度的块行为
【发布时间】：2015-05-02 01:50:00
【问题描述】：

我正在尝试使用AccordionPane 获得“块”显示效果，以便窗格与间距垂直对齐。但是使用display:block; 将拉伸窗格的标题以适应整个可用宽度。使用 display:inline; 将获得我想要的宽度行为，但随后会水平堆叠窗格，没有间距。

例如，“基本信息”是带有display: block; 的未选中窗格。我想要具有display: inline; 的窗格“功能”的宽度

但是，这样做会导致以下结果：

不仅未选择的面板水平地挤在一起，顶部也从内容窗格中截断。

我希望所有面板的宽度都适合内容，但垂直堆叠时使用display: block; 看到的干净间距。这可能吗？

这里是 aspx sn-p:

<ajaxToolkit:Accordion
                     ClientIDMode="Static"
                     runat="server"
                     AutoSize="None"
                     Height="500"
                     ContentCssClass="accordion"
                     HeaderCssClass="accordionHeader"
                     HeaderSelectedCssClass="accordionHeaderSelected"
                     BorderStyle="None"
                     style="outline: none; vertical-align: top;"
                   >

【问题讨论】：

标签： html css asp.net ajaxcontroltoolkit

【解决方案1】：

这是可能的，但您需要将它们浮动float:left; clear: both，或者为您的项目设置固定宽度并使用display:block。

如果您需要设置垂直边距，也可以使用display:inline-block。

【讨论】：

【解决方案2】：

要获得此行为，我需要将其设置为 display: table;

【讨论】：

这就是我需要设置 display 属性以获得所需的宽度和面板布局行为使其成为问题的完整答案。