ons-listを２列にしたい


タイトル通りですが２列にしたいのですが改行されてしまい、想定と異なった表示になってしまいます。基本的なことで申し訳ありませんがどなたかご教授いただけますでしょうか。

[code]

    ons.bootstrap()
    .controller('main', function($scope) {
      $scope.disable = false;
      $scope.push = function(page) {
        $scope.disable = true;
        setTimeout(function(p) {
          myNavigator.pushPage(p);
        }, 1500, page);
      }
      $scope.postPush = function() {
        $scope.disable = false;
      }
    });
[/code]

[code]

    .list-container{
      width:100%
    }
    
    .niretsu{
      width:50%;
    }
[/code]

[code]

    head>
      <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/js/angular/angular.min.js"></script>
      <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/js/onsenui.min.js"></script>
      <link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/css/onsenui.css" rel="stylesheet"/>
      <link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/css/onsen-css-components.css" rel="stylesheet"/>
    </head>
    
    <body ng-controller="main">
        <ons-navigator var="myNavigator" page="page1.html" ons-postpush="postPush()">
        </ons-navigator> 
    </body>
    
    <ons-template id="page1.html">
      <ons-page>
          <ons-list class="list-container">
            
              <ons-list-header>2列</ons-list-header>
            
              <ons-list-item id="1-1"class="niretsu">1-1</ons-list-item>
              <ons-list-item id="1-2"class="niretsu" >1-2</ons-list-item>
            
              <ons-list-item id="2-1"class="niretsu" >2-1</ons-list-item>
              <ons-list-item id="2-2"class="niretsu" >2-2</ons-list-item>
            
              <ons-list-item id="3-1"class="niretsu" >3-1</ons-list-item>
              <ons-list-item id="3-2"class="niretsu" >3-2</ons-list-item>
    
            
              <ons-list-header>Tappable Numbers</ons-list-header>
              <ons-list-item modifier="tappable">Tap Me</ons-list-item>
              <ons-list-item modifier="tappable">Tap Me</ons-list-item>
              <ons-list-item modifier="tappable">Tap Me</ons-list-item>
              <ons-list-item modifier="tappable">Tap Me</ons-list-item>
              <ons-list-item modifier="tappable">Tap Me</ons-list-item>
              <ons-list-item modifier="tappable">Tap Me</ons-list-item>
            </ons-list>
      </ons-page>
    </ons-template>
    
    <ons-template id="page2.html">
      <ons-page>
        <ons-toolbar>
          <div class="left"><ons-back-button>Back</ons-back-button></div>
          <div class="center">Page 2</div>
        </ons-toolbar>
    
        <div style="text-align: center">
          <h1>Page 2</h1>
          <ons-button onclick="myNavigator.popPage()">
            Pop Page
          </ons-button>
        </div>
      </ons-page>
    </ons-template> 
[/code]




Chromeの場合ですが、DIVタグで横に並べればいけると思います。

[code]

    <ons-template id="page1.html">
      <ons-page>
        <div style="width: 50%; float: left;">
          <ons-list>
            <ons-list-header>2列</ons-list-header>
            <ons-list-item id="1-1"class="niretsu">1-1</ons-list-item>
            <ons-list-item id="1-2"class="niretsu" >1-2</ons-list-item>
            <ons-list-item id="2-1"class="niretsu" >2-1</ons-list-item>
            <ons-list-item id="2-2"class="niretsu" >2-2</ons-list-item>
            <ons-list-item id="3-1"class="niretsu" >3-1</ons-list-item>
            <ons-list-item id="3-2"class="niretsu" >3-2</ons-list-item>
          </ons-list>
        </div>
        <div>
          <ons-list>
            <ons-list-header>Tappable Numbers</ons-list-header>
            <ons-list-item modifier="tappable">Tap Me</ons-list-item>
            <ons-list-item modifier="tappable">Tap Me</ons-list-item>
            <ons-list-item modifier="tappable">Tap Me</ons-list-item>
            <ons-list-item modifier="tappable">Tap Me</ons-list-item>
            <ons-list-item modifier="tappable">Tap Me</ons-list-item>
            <ons-list-item modifier="tappable">Tap Me</ons-list-item>
          </ons-list>
        </div>
      </ons-page>
    </ons-template>
    
[/code]

追記  
Monacaのプレビューでも確認しました。  
[![画像の説明をここに入力](https://i.stack.imgur.com/C0kZG.png)](https://i.stack.imgur.com/C0kZG.png)

