Q&A
ご回答いただき有難うございます。
助かります。
この場合ですと「お名前」と入力欄が改行されてしまいました。
が、今後参考とさせていただきます。
ありがとうございました。
お世話になっております。
入力フォームをレスポンシブに形成する為に以下のようにHTMLとCSSを記載しました。
HTMLはこちら
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>リストのFlex表示</title> 6 <link rel="stylesheet" type="text/css" href="stylelist.css"> 7</head> 8 <body> 9 <ul> 10 <li> 11 <span>お名前</span> 12 <span><input type="text" name="name" size="20"> </span> 13 </li> 14 <li>リスト２</li> 15 <li>リスト３</li> 16 </ul> 17 </body> 18</html>
CSSはこちら
CSS
1ul{ 2 list-style-type: none; 3} 4li{ 5 /*border: solid 1px;*/ 6 display: flex; 7 flex-wrap: wrap; 8 align-items:center; 9 margin: 2px; 10 background: #E6E6E6; 11} 12ul li span input[type="text"]{ 13 width:100%; 14 border-radius: 5px; 15 box-sizing: border-box; 16} 17li span:first-of-type{ 18 flex-basis: 120px; 19}
実現したいことは、
上記HTML中のinput要素において、「そのテキスト入力欄の幅を画面いっぱいまで
広げる」ということです。width:100%でその指定をしているつもりですが、
'flex-wrap:wrap'プロパティで折り返し指定していると100%になりません。
対処方法などご教示いただけないでしょうか？
回答2件
0
ベストアンサー
質問者さんの実現したいことは、flexプロパティを使うことで行えると思います(動作確認用リンク)。
CSS
1ul { 2 list-style-type: none; 3} 4 5li { 6 display: flex; 7 flex-wrap: wrap; 8 align-items: center; 9 margin: 2px; 10 background: #e6e6e6; 11} 12 13ul li span input[type="text"] { 14 width: 100%; 15 border-radius: 5px; 16 box-sizing: border-box; 17} 18 19li span:first-of-type { 20 flex-basis: 120px; 21} 22 23/* 追加ここから */ 24span:nth-of-type(2) { 25 flex: 1; 26} 27/* 追加ここまで */
投稿2019/02/27 02:25
編集2019/02/27 02:26
総合スコア14731
0
inputそのものが100%まで広がればいいんですかね？
多分、inputをspanで囲ってしまっているのでそのspanそのものに対しての100%という風になっているからじゃないでしょうか？
inputを包んでいるspanにclassを付与するか、この入力フォームが絶対にこれ以上拡張しないのであれば
css
1ul li span:nth-child(2) { 2 display: block; 3 width: 100%; 4}
でいけないでしょうか？
投稿2019/02/27 02:29
総合スコア50
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/02/27 02:31
2019/02/27 02:49
2019/02/27 03:12