ons-listを2列にしたい
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;
}
});
.list-container{
width:100%
}
.niretsu{
width:50%;
}
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>
毎度お世話になっております。タイトル通りですが2列にしたいのですが改行されてしまい、想定と異なった表示になってしまいます。
基本的なことで申し訳ありませんがどなたかご教授いただけますでしょうか