

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

[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]


CC BY-SA 4.0
2015-07-22T07:15:06.640
12568
2020-02-25T11:47:45.637
2020-02-25T11:47:45.637
3060
7724
question
html monaca css
ons-listを２列にしたい


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)


CC BY-SA 3.0
2015-07-27T02:17:36.890
12733
2015-07-27T02:25:39.907
2015-07-27T02:25:39.907
9566
9566
12568
answer