Étiquette de case à cocher affichée sur la ligne suivante si la largeur de l'étiquette dépasse la limite de la balise Div

Question

Je travaille avec une CheckBoxList, les cases à cocher sont affichées dans la ligne suivante si la valeur dépasse la largeur de la balise div.

Existe-t-il un moyen de les aligner sur la même ligne ?

  <table id="Table1">
                    <tr>
                        <td width="250px">
                            <asp:Label ID="deleteLabel" runat="server" Text="Select "></asp:Label>
                        </td>
                        <td width="900px">
                            <div style="border-style: solid; border-color: inherit; border-width: thin; overflow: auto;
                                width: 356px; height: 100px" class="ccodes" runat="server" id="deletePanel1">
                                <asp:CheckBox ID="CheckBoxSelectAll" runat="server" Text="All" />
                                <asp:CheckBoxList ID="checkBoxListDeleteEntities" runat="server" RepeatDirection="Vertical"
                                    Height="26px">
                                </asp:CheckBoxList>
                            </div>
                        </td>
                    </tr>   
    </table>

Les valeurs sont affichées comme indiqué ci-dessous. (pour la troisième valeur si elle dépasse la largeur de la div (356px))

[] test1
[] test2
[]
test test test test test test test test test test test test test 

Comment faire pour que l'étiquette de la case à cocher soit en ligne avec la case à cocher ?

Answer 1

Avez-vous essayé white-space: nowrap ?

.nowrap_list tr td label
{
    white-space:nowrap;
    overflow:hidden;
}

<asp:CheckBoxList ID="checkBoxListDeleteEntities"
    CssClass="nowrap_list"
    runat="server" RepeatDirection="Vertical"
    Height="26px">
</asp:CheckBoxList>