如何防止它在html中换行？

我有以下html代码，它创建了以下内容：

<input type="checkbox" id="cb5" class="listDropDown" onchange="selectPopulationChanged()" display="inline" value="complex ab. karyotype">
<label for="cb5" class="listDropDown" display="inline">complex ab. karyotype</label>

jQuery：

function addCheckboxes() {
    $("#popupDropDown").empty();
    for(i=0; i<arrayValues.length; i++)
    {
        var container = $('#popupDropDown');
        var inputs = container.find('input');
        var id = inputs.length+1;
        $('<input />', { type: 'checkbox', 'id': 'cb'+id, 'class': 'listDropDown', 'onChange': 'selectPopulationChanged()', 'display':'inline', value: arrayValues[i] }).appendTo(container);
        $('<label />', { 'for': 'cb'+id, 'class': 'listDropDown', 'display':'inline', text: arrayValues[i] }).appendTo(container);
        $('</br>').appendTo(container);
        $('#cb'+id).prop('checked', true);
    }
}

函数添加复选框（）{
$（“#popupDropDown”）.empty（）；
对于（i=0；i@Nit），黑暗的绝对已经给出了一个暗示

<label class="listDropDown" style="white-space: nowrap">
<input type="checkbox" id="cb5" class="listDropDown" onchange="selectPopulationChanged()" value="complex ab. karyotype">complex ab. karyotype
</label>


复杂核型

请注意，“for”属性已消失，并且应用了nowrap属性

要在jQuery代码中应用这一点，请将输入附加到标签，并对标签使用CSS属性

var mylabel = $('<label />', {
    'for' : 'cb' + id,
    'class' : 'listDropDown',
    text : arrayValues[i],
    css : {
        'display' : 'inline',
        'white-space' : 'no-wrap'
    }
}).appendTo(container);

var myinput = $('<input />', {
    type : 'checkbox',
    'id' : 'cb' + id,
    'class' : 'listDropDown',
    'onChange' : 'selectPopulationChanged()',
    css : {
        'display' : 'inline'
    },
    value : arrayValues[i]
}).appendTo(mylabel);

var mylabel=$（“”{
‘for’：‘cb’+id，
“类”：“列表下拉列表”，
文本：数组值[i]，
css:{
“显示”：“内联”，
“空白”：“无换行”
}
}).附在（容器）上；
var myinput=$（''{
键入：“复选框”，
“id”：“cb”+id，
“类”：“列表下拉列表”，
“onChange”：“selectPopulationChanged（）”，
css:{
“显示”：“内联”
},
值：数组值[i]
}).附录（mylabel）；

我也不确定显示属性是否会按您的方式应用，但您可以将其放置在css属性中，如图所示。
在
for
循环中尝试此代码（替换所述循环的所有现有内容）：

这将把复选框放在
中，正如我在评论中提到的，这样你就可以在标签元素上使用
空白：nowrap
，以防止换行。另外，在标签上添加
显示：block
，以避免使用

标签

可能需要更多的写作，但我个人觉得这比你非常大的jQuery生成内容更容易阅读。
Text
可能会有所帮助。有很多选项；字体大小越小，宽度越宽（在父级上）或填充越多（在父级上）。或者限制宽度并使用省略号@NiettheDarkAbsol虽然这是一个语义选项，但我认为将输入包装在标签中对可访问性有害，尽管这样做似乎很直观。您还可以定义标签的宽度并使用内联块显示。谢谢，我理解Dark Absols提示，它确实有效，尽管ch很棒！但是正如我提到的，我正在使用jQuery创建它，正如我在问题上编辑的那样。我正在尝试使用jQuery执行以下操作，但是在将输入放入标签内部以及包含css
style=“空白：nowrap”时遇到了问题
非常感谢！这太简单了，帮了我很多忙！赞美黑暗绝对！呵呵，很高兴我能帮上忙！
<label class="listDropDown" style="white-space: nowrap">
<input type="checkbox" id="cb5" class="listDropDown" onchange="selectPopulationChanged()" value="complex ab. karyotype">complex ab. karyotype
</label>

var mylabel = $('<label />', {
    'for' : 'cb' + id,
    'class' : 'listDropDown',
    text : arrayValues[i],
    css : {
        'display' : 'inline',
        'white-space' : 'no-wrap'
    }
}).appendTo(container);

var myinput = $('<input />', {
    type : 'checkbox',
    'id' : 'cb' + id,
    'class' : 'listDropDown',
    'onChange' : 'selectPopulationChanged()',
    css : {
        'display' : 'inline'
    },
    value : arrayValues[i]
}).appendTo(mylabel);

var container = document.getElementById('popupDropDown');
var label = document.createElement('label');
label.className = "listDropDown";

var input = document.createElement('input');
input.type = "checkbox";
input.className = "listDropDown";
input.onchange = selectPopulationChanged;
input.value = arrayValues[i];

label.appendChild(input);
label.appendChild(document.createTextNode(arrayValues[i]));

container.appendChild(label);