div左右并列,第二个换行了。。。。

就简单的div,为什么第二个会换行啊, 求高手解答。

 <div id="container" style="width:1100px">
    <div id="left" style="height:20px;width:800px;float:left;">
        <label for="channelName">通路结构</label>
        <input name="channelName" type="text" value="${channel.name}" id="channelName"  size="50" disabled="disabled" />
        <input type="button" value="选择" onclick="chooseChannelByType('4,5,6,7,8,9,91,10,11,20', 'false');"/>
        <input type="hidden"" name="includeSubChannel" id="includeSubChannel" value="1" />
    </div>
    <div style="clear:both"></div>
    <div id="right" style="height:20px;width:800px;float:left;">
        <span class="amountVerify" style="margin-right:10px; font-size: 15px;font-weight: bold;" >余额校验</span>
        <input class="amountVerify" type="radio" name="balanceVerify" id="verify" value="1" onclick="accordShow();"><span class="amountVerify" >是</span>
        <input class="amountVerify" type="radio" name="balanceVerify" id="noVerify" value="2" checked="checked" onclick="accordShow();"/><span class="amountVerify" >否</span>
    </div>
</div>

直接复制代码不显示
图片说明

style="float: rigth"
加上浮动

div 区块级元素,一个独占一行,可以用两个都用float:left,也可以用display:inline;使其变为行内元素

你的总体宽度不能满足这两个div所占的宽度,就会掉下来换行

你内部2个字div都是800,容器1100,已经超过容器宽度了当然掉下去了,容器宽度改1600

而且要去掉你那个清除浮动的div,要不也是掉下去的,清除浮动了



<div id="container" style="width:1600px">
    <div id="left" style="height:20px;width:800px;float:left;">
        <label for="channelName">通路结构</label>
        <input name="channelName" type="text" value="${channel.name}" id="channelName" size="50" disabled="disabled" />
        <input type="button" value="选择" onclick="chooseChannelByType('4,5,6,7,8,9,91,10,11,20', 'false');" />
        <input type="hidden" =" name=" includesubchannel"=includeSubChannel" id="includeSubChannel" value="1" />
    </div>
    <!--<div style="clear:both"></div>-->
    <div id="right" style="height:20px;width:800px;float:left;">
        <span class="amountVerify" style="margin-right:10px; font-size: 15px;font-weight: bold;">余额校验</span>
        <input class="amountVerify" type="radio" name="balanceVerify" id="verify" value="1" onclick="accordShow();" /><span class="amountVerify">是</span>
        <input class="amountVerify" type="radio" name="balanceVerify" id="noVerify" value="2" checked="checked" onclick="accordShow();" /><span class="amountVerify">否</span>
    </div>
</div>