スマホっぽいUIのサイトを手軽に作れるjQuery mobileだが、グリッドの幅を調整できないのが不満だった。
<div style="width: 10em;"></div>
などとしても無視されてしまう。
どうやらこういう仕様であるようだ。
解決方法は、考えてみれば単純なものだった。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<style type="text/css">
<!--
.mygrid-main .ui-block-a{
width:6em;
}
.mygrid-main .ui-block-b{
min-width:12em;
}
-->
</style>
</head>
<body>
<div data-role="page" id="main" data-theme="b">
<div data-role="content">
<div>
<div><a href="http://localhost/" data-role="button">1</a></div>
<div><a href="http://localhost/" data-role="button">2</a></div>
</div>
</div>
</div>
</body>
</html>