スマホで同じ幅3つのボックスをビューポートいっぱいに並列させたいえ、なんのことやらと思うようなエントリータイトルですが、以下のスクリーンショットのような状態を作りたいときです。 ちなみにviewportの指定は「<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />」の、ピンチイン殺してるやつです。 左から青赤黄色のボーダーがビューポート幅にあわせて同じ幅でぴっちりとおさまっています。 IE6脳でコーディングしてしまうとfloatで横並びにしてそれぞれの幅に「33%」「34%」「33%」を指定しておこうかとか考えがちですが、これだと右隅に余白ができてしまいます。 HTMLとCSSは以下となります。 <ul> <li><a href="#">あ</a></li> <li><a href="#"
