0

我有一个包含在 div 中的转发器，它将结果显示为水平文本。div 设置为 450px 的最大宽度，这会导致结果换行到完美的下一行，但当结果的宽度小于 450px 时，宽度仍为 450px。我希望 div 调整到结果的宽度。

这是div中的数据包装ok：

结果包装正常

当结果数量很少时会发生这种情况：

结果没有缩小

这就是我想要发生的事情：

结果缩小了

这是我的 div 的 CSS：

        div.SelectedStudents {
            background-color: lightyellow;
            font-family: verdana, tahoma, Helvetica, sans-serif;
            font-size: 11px;
            border:solid 1px black;
            max-width:450px;
            text-align: left;
            margin-left: auto;
            margin-right: auto;
            padding: 5px;
            line-height:1.5em;
        {

这是我的 div 和中继器：

           <div class="SelectedStudents"> 
               <asp:Repeater ID="Repeater1" runat="server" DataSourceID="dsProgressCohorts" onitemdatabound="Repeater1_ItemDataBound">
                   <ItemTemplate>
                       <asp:Label ID="Column1Label" runat="server" Text='<%# Eval("Column1") %>' />
                    </ItemTemplate>
                    <AlternatingItemTemplate>
                        <asp:Label ID="Column1Label" runat="server" Text='<%# Eval("Column1") %>' Font-Bold="True" />
                    </AlternatingItemTemplate>               
                    <FooterTemplate>
                        <asp:Label ID="lblEmptyData" Text="No Data To Display" runat="server" Visible="false" />
                    </FooterTemplate>
                </asp:Repeater>
           </div>

编辑：

应用display:table;到 css 后，我失去了每个结果之间的空格：

显示：表格；

+ ' '通过在我调用以检索结果的 SQL 存储过程中的 select 语句中添加一个空格来解决这个问题。

4

2 回答 2

2

您需要添加的只是display: table. 它的作用类似于 inline-block ，因为它会缩小以适应内容，但不会使元素出现内联。

http://cssdeck.com/labs/12tg3bge

div.SelectedStudents {
    background-color: lightyellow;
    font-family: verdana, tahoma, Helvetica, sans-serif;
    font-size: 11px;
    border:solid 1px black;
    max-width:450px;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    padding: 5px;
    line-height:1.5em;
    display: table;
}
于 2013-06-12T12:15:16.967 回答
0

尝试在css中将宽度设置为自动：

div.SelectedStudents {
        background-color: lightyellow;
        font-family: verdana, tahoma, Helvetica, sans-serif;
        font-size: 11px;
        border:solid 1px black;
        max-width:450px;
        text-align: left;
        margin-left: auto;
        margin-right: auto;
        padding: 5px;
        line-height:1.5em;
        width: auto;
    }

如果它不起作用，请将 div 内所有其他容器的宽度也设置为 auto。

于 2013-06-12T11:22:00.763 回答