jQuery Mobileを使用して2つのボタンを並べて表示する

jQuery/Mobile/HTML5/CSS3の新機能です。jQuery Mobileを使用して2つのボタンを並べて表示する

以下のコードを使用して、ボタンを水平方向に（それぞれ50％の幅で）表示し、画面全体に100％伸ばします。簡単に見えますが、何らかの理由でボタンが縦に表示されます

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title></title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script> 
    <style> 
     #page-buttons .ui-controlgroup-controls { width: 100%; } 
     #page-buttons .ui-controlgroup-controls a { width: 50%; } 
    </style> 
</head> 
<body> 
<div id="page-buttons" data-role="controlgroup" data-type="horizontal"> 
    <a href="#" data-role="button">Previous</a> 
    <a href="#" data-role="button">Next</a> 
</div> 
</body> 
</html>

をサイド・バイ・サイドのボタンを表示するための唯一の方法は、49.8パーセントの幅を設定することです。しかし、なぜ？

私はここにjsfiddleを作成しました：https://jsfiddle.net/j0q0gqca/

出典

2016-06-20 Reado

あなたはbutton年代に境界線を持っているあなたはbox-sizing: border-boxDEMO

* { 
    box-sizing: border-box; 
} 
#page-buttons .ui-controlgroup-controls { 
    width: 100%; 
} 
#page-buttons .ui-controlgroup-controls a { 
    width: 50%; 
}

出典

2016-06-20 15:31:17

ありがとうございます、それは完璧に動作します！ – Reado

よろしくお願いします。 –

これをあなたのサイトに入れたら、私はワイルドカードに注意しています。ライン上の問題から自分自身を救うために必要な要素にちょうどボックスサイズを適用するかもしれません。 –

を追加する必要がありますので、これを解決するための簡単な方法は、あなたのコンテナaを与えることですdisplay: flex;

#page-buttons .ui-controlgroup-controls { 
    width: 100%; 
    display: flex; 
}

JSFiddle

出典

2016-06-20 15:32:20

ありがとう、それはうまくいきますが、Nenad Vracarの答えはより良いでしょうコードを少なくする（ワイルドカードを参照する）ことはできませんか？ – Reado

私は、ここでのCSSのコードの量が何らかの違いを生み出すとは思っていません。あなたが見なければならないのは、結果を達成するために使用される方法です。このソリューションは、「ボックスサイズ」ソリューションよりもブラウザの問題が多い「フレックス」を使用しています（私は間違っていると言っているわけではありません）。 Nenandの「ボックスサイジング」ソリューションは、「幅：50％」という問題の根源になっていますが、そのすべてがうまくいきますが、ボタンのパディングと境界線を表示する必要があります並んで。まさに「箱サイズ：border-box」と同じものです –

jQuery Mobileを使用して2つのボタンを並べて表示する

答えて

関連する問題