div用的float自动换行，子div有的显示乱行有的显示正常

Question

$().ready(function(){

$("#navmenu").on("click",".exercise_block",function(){
    debugger;
    var exerciseId = $(this).attr("exerciseId");
    var catgory = $(this).attr("catgory");
    var x = ($(this).position().top ) + "px";
    if (x == "130px"){
        $(".exercise_block").css("height","35px");
        $("#navmenu").find("#sub_navmenu").css("top","-5px");
    }else{
        $(".exercise_block").css("height","50px");
        $("#navmenu").find("#sub_navmenu").css("top","-73px");
    }
    $(this).addClass("current").siblings().removeClass("current");
    // 子节点数据
    $.ajax({
        url:'<c:url value="/exercise/getChildrenList.action"/>',
           data:"&catgory="+catgory+"&joinner="+joinner+"&exerciseId="+exerciseId,
           type: "post",
           async: "false",
           dataType: "json",
           success: function(response) {

// result = response.message;

               //alert(response.message);
               if(response.message == 0){
                   $("#sub_navmenu").hide();
                   //加载对应小练习
                $("#exerciseIframe").attr("src","<s:url value='/exercise/czeditExerciseInit.action?exerciseId='/>" + exerciseId+"&joinner="+joinner);
              } else {
                   $("#sub_navmenu").empty();
                   for(var i=0;i<response.message.length;i++){    
                       var exerciseChildren = $("<span  class= 'exerciseName' exerciseId='" + response.message[i].exerciseId+ "'>" + response.message[i].name +"</span>"+"&nbsp;&nbsp;");
                       
                       $("#sub_navmenu").append(exerciseChildren);                    
                   }
                   $("#sub_navmenu").show(); 
              }    
               }
        });
});
$("#navmenu").find(".exercise_block:first").trigger("click");
$("#sub_navmenu").on("click",".exerciseName",function(){
    $(this).addClass("current").siblings().removeClass("current");
    var exerciseId = $(this).attr("exerciseId");
    //加载小练习
    $("#exerciseIframe").attr("src","<s:url value='/exercise/czeditExerciseInit.action?exerciseId='/>" + exerciseId+"&joinner="+joinner);
});
$("#navmenu").find(".exerciseName:first").trigger("click");

});

同一行的其他显示都正常，只有第一行最后一个显示的乱行
都是判断高度进行显示的
var x = ($(this).position().top ) + "px";

if (x == "130px"){
    $(".exercise_block").css("height","35px");
    $("#navmenu").find("#sub_navmenu").css("top","-5px");
}else{
    $(".exercise_block").css("height","50px");
    $("#navmenu").find("#sub_navmenu").css("top","-73px");
}

子div的样式设置：

sub_navmenu{

 display: inline-block;
 width:1024px;
 background-color:#E3F2FD;
position:relative;
 

}
如图所示：

最后一个的就是乱了：

这是什么原因吗？

Answer 1

；float浮动；设置宽度后，总宽度不够就会自动换行