初学者提问页面布局乱

hnyyjt

     按照教程做页面布局显示好乱，请问是为什么

淡陌

是不是内容超出，然后把其它的挤下去了？？

李依荀

把源码放出来，才好确定是什么问题

闰土

样式问题，最好通过 f12 的浏览器开发者工具，通过审查元素找一下，你这个用的什么组件？list 里面套的是什么？

hnyyjt

是list里面套list

hnyyjt

李依荀 发表于 2016-10-18 09:03
把源码放出来，才好确定是什么问题

是按照官方教程做的
<?xml version="1.0" encoding="utf-8"?>
<div xmlns="http://www.w3.org/1999/xhtml" component="$UI/system/components/justep/window/window" design="device:m;" xid="window" class="window">  
  <div component="$UI/system/components/justep/model/model" xid="model" style="height:auto;top:326px;left:24px;">
  <div component="$UI/system/components/justep/data/data" autoLoad="true" xid="cartGoodsData" idColumn="id" onCustomRefresh="cartGoodsDataCustomRefresh"><column label="ID" name="id" type="String" xid="xid3"></column>
  <column label="商铺ID" name="fShopID" type="String" xid="xid4"></column>
  <column label="商品ID" name="fGoodsID" type="String" xid="xid5"></column>
  <column label="商品名称" name="fTitle" type="String" xid="xid6"></column>
  <column label="图片" name="fImg" type="String" xid="xid7"></column>
  <column label="现价" name="fPrice" type="Decimal" xid="xid8"></column>
  <column label="原价" name="fOldPrice" type="Decimal" xid="xid9"></column>
  <column label="规格" name="fSize" type="String" xid="xid10"></column>
  <column label="数量" name="fNumber" type="Decimal" xid="xid11"></column></div><div component="$UI/system/components/justep/data/data" autoLoad="true" xid="cartShopData" idColumn="id" onCustomRefresh="cartShopDataCustomRefresh"><column label="ID" name="id" type="String" xid="xid1"></column>
  <column label="商铺名称" name="fShopName" type="String" xid="xid2"></column></div></div>  
  <div component="$UI/system/components/justep/panel/panel"
    class="x-panel x-full" xid="panel1">
      <div class="x-panel-top" xid="top1">
        <div component="$UI/system/components/justep/titleBar/titleBar" title="标题"
          class="x-titlebar">
          <div class="x-titlebar-left">
            <a component="$UI/system/components/justep/button/button"
              label="" class="btn btn-link btn-only-icon" icon="icon-chevron-left"
              onClick="{operation:'window.close'}" xid="backBtn">
              <i class="icon-chevron-left"/>  
              <span></span>
            </a>
          </div>  
          <div class="x-titlebar-title">标题</div>  
          <div class="x-titlebar-right reverse">
          </div>
        </div>
      </div>  
    <div class="x-panel-content" xid="content1"><div component="$UI/system/components/justep/list/list" class="x-list" xid="list1" data="cartShopData" style="height:219px;">
   <ul class="x-list-template" xid="listTemplateUl1">
    <li xid="li1" style="height:109px;">
  <div component="$UI/system/components/justep/row/row" class="x-row" xid="row1">
   <div class="x-col x-col-fixed x-col-center" xid="col1" style="width:auto;"><span component="$UI/system/components/justep/button/checkbox" class="x-checkbox" xid="checkbox1"></span></div>
   <div class="x-col x-col-center" xid="col2"><span xid="span1" bind-text='val("fShopName")'></span></div>
   <div class="x-col x-col-fixed" xid="col3" style="width:auto;"></div></div>
  <div component="$UI/system/components/justep/list/list" class="x-list" xid="list2" data="cartGoodsData" filter=' $row.val("fShopID")== val("id")'>
   <ul class="x-list-template" xid="listTemplateUl2">
    <li xid="li2">
   
  <div component="$UI/system/components/justep/row/row" class="x-row" xid="row3">
   <div class="x-col x-col-fixed x-col-center" xid="col10" style="width:auto;"><span component="$UI/system/components/justep/button/checkbox" class="x-checkbox" xid="checkbox2"></span></div>
   <div class="x-col x-col-fixed x-col-center" xid="col11" style="width:auto;"><img src="" alt="" xid="image1" bind-attr-src=' val("fImg")' style="width:60px;"></img></div>
   <div class="x-col" xid="col12"><div component="$UI/system/components/justep/row/row" class="x-row" xid="row4">
   <div class="x-col" xid="col13"><span xid="span2" bind-text='val("fTitle")'></span></div>
   </div>
  <div component="$UI/system/components/justep/row/row" class="x-row" xid="row5">
   <div class="x-col" xid="col16"><span xid="span7" bind-text="'型号：'+ val(&quot;fSize&quot;)"></span></div>
   </div>
  <div component="$UI/system/components/justep/row/row" class="x-row" xid="row6">
   <div class="x-col" xid="col19"><span xid="span8" bind-text="'￥'+ val(&quot;fPrice&quot;)"></span></div>
   <div class="x-col x-col-fixed x-col-center" xid="col20" style="width:auto;"><a component="$UI/system/components/justep/button/button" class="btn btn-link btn-xs btn-only-icon" xid="button3" icon="linear linear-volumemedium">
   <i xid="i3" class="linear linear-volumemedium"></i>
   <span xid="span9"></span></a></div>
   <div class="x-col x-col-fixed" xid="col21" style="width:60px;"><input component="$UI/system/components/justep/input/input" class="form-control input-sm" xid="input1" bind-ref='ref("fNumber")'></input></div>
  <div class="x-col x-col-fixed x-col-center" xid="col22" style="width:auto;"><a component="$UI/system/components/justep/button/button" class="btn btn-link btn-xs btn-only-icon" xid="button4" icon="linear linear-bus">
   <i xid="i4" class="linear linear-bus"></i>
   <span xid="span10"></span></a></div></div></div></div></li></ul>
  </div>
  <div component="$UI/system/components/justep/row/row" class="x-row" xid="row2">
   <div class="x-col x-col-center" xid="col7" style="text-align:right;"><span xid="span5"><![CDATA[总价（不含运费）]]></span></div>
  <div class="x-col x-col-fixed" xid="col8" style="width:auto;"></div>
  <div class="x-col x-col-fixed" xid="col9" style="width:auto;"><a component="$UI/system/components/justep/button/button" class="btn btn-default" label="去结算" xid="button2">
   <i xid="i2"></i>
   <span xid="span6">去结算</span></a></div></div></li></ul> </div></div>
  </div>
</div>