下記のように、セレクトボックスを画面中央に配置し、左に”ユーザー”というlabelを配置、
同じく画面中央に配置したテキストボックスの左に”PASS”というlabelを配置したいです。
labelは要素の説明なのですが、どのような書き方をするのが最適なのでしょうか。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答4件
0
これでも良いかと思います〜
単純に真ん中の寄せた要素のひとつひとつの左側にposotion: absoluteで指定しただけですが!
html
1<form action=""> 2 <div> 3 <div class="input-container"> 4 <label for="">ユーザー名</label> 5 <input type="text"/> 6 </div> 7 </div> 8 <div> 9 <div class="input-container"> 10 <label>パスワード</label> 11 <input type="text" /> 12 </div> 13 </div> 14</form>
css
1form{ 2 width: 400px; 3 margin: 0 auto; 4 border: solid 1px #ccc; 5 text-align: center; 6} 7 8.input-container{ 9 display: inline-block; 10 position: relative; 11} 12 13.input-container label{ 14 position: absolute; 15 left: -100px; 16 top: 50%; 17 transform: translateY(-50%); 18 19}
投稿2017/09/11 02:37
編集2017/09/11 13:12総合スコア1869
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/09/11 12:45
2017/09/11 12:46
2017/09/11 12:53
2017/09/11 13:11
0
まずユーザーが選択肢から選ぶように見えますが、
不特定のユーザー名をさらすのは仕様としてはあまり美しくない気がします
(攻撃して下さいといっているようにみえます)
その上で「テキストボックスを中央に配置し」の意図がわかかねます
dialogを作るということでしょうか?
「左にlabelを配置」も意味がよく通じません。
いわゆるlabelを設定するとしてテキストボックスへのフォーカス程度にしか
使えないように見受けられます。
単に見出しと言う意味でしょうか?
dialogをつくって、dl-dt-ddで組むと良いかもしれません。
場合によっては表として認識してtableでもおかしくはないと思います
sample
css
1dialog h1{text-align:center;} 2dialog dl{width:20em;} 3dialog dt{clear:both;float:left;display:block;width:4em;} 4dialog dd{display:block;}
HTML
1<dialog open> 2<form> 3<h1>ログイン</h1> 4<dl> 5<dt>ユーザー</dt> 6<dd><input type="search" name="user" list="userlist" autocomplete="on" required> 7<datalist id="userlist"> 8<option value="user1"> 9<option value="user2"> 10<option value="user3"> 11</datalist> 12</dd> 13<dt>PASS</dt> 14<dd><input type="password" name="passwd" required></dd> 15<dd><input type="submit" value="ログイン"></dd> 16</dl> 17</form> 18</dialog>
投稿2017/09/11 02:38
編集2017/09/11 03:17総合スコア114572
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/09/11 02:46
2017/09/11 03:18
0
これでいかがでしょうか?
<div id="left"> <label>ユーザー</label> </div> <div id="center"> <input type="text"> </div> <div id="right"> </div> #left{ width:25%; float:left; } #center{ width:50%; float:left; text-align:center; } #right{ width:25%; float:left; }
投稿2017/09/11 02:31
編集2017/09/11 05:45総合スコア257
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
0
Bootstrap 4 の例
HTML
1<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
HTML
1<form action="#" class="container border border-dark p-5"> 2 <p class="text-center">ログイン</p> 3 <div class="form-group row"> 4 <label for="user" class="col-sm-4 col-form-label text-center">ユーザー</label> 5 <div class="col-sm-8"> 6 <select name="user" id="user" class="form-control" required="required"><option></option></select> 7 </div> 8 </div> 9 <div class="form-group row"> 10 <label for="pass" class="col-sm-4 col-form-label text-center">PASS</label> 11 <div class="col-sm-8"> 12 <input type="password" name="pass" id="pass" class="form-control" required="required" /> 13 </div> 14 </div> 15 <div class="row justify-content-center"> 16 <button class="btn btn-sm" disabled="disabled" type="submit">ログイン</button> 17 </div> 18</form>
投稿2017/09/11 09:15
総合スコア13749
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。