chrome,safariにおいては理想通りの形になるのですが、firefoxにおいてinput要素が飛び出た状態になってしまいます。
同じような組み方で対応したいです。
よろしくおねがします。
###該当のソースコード
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>テスト</title> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css"> </head> <style> * { box-sizing: border-box; } input { font-size: 12px; width: 100%; } .input_200 { max-width: 200px; } .input_wrap { display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; width: 100%; } [class*="unit"] { color: #333; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: flex-end; justify-content: flex-end; font: 400 11px/1em 'noto sans japanese'; flex: 0 0 2.5em; } [class *="unit"][class*="center"] { -webkit-justify-content: center; justify-content: center; padding: 0 .5em; } </style> <body> <div class="form_cnt"> <div class="input_wrap input_200"> <input type="text" value="2017.12.14"> <span class="unit_center">-</span> <input type="text" value="2017.12.16"> </div> </div> </body> </html>
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/12/27 07:59