初歩的な質問失礼します。
画面の真ん中に入力フォームを置き、そのすぐ左に文字列を入れたいと考えています。
フォームの位置は真ん中で固定させ、文字列は長さに応じて左方向に伸びていく感じです。
しかし、文字列とフォームの2つを合わせた全体をセンタリングすることはできるのですが、
フォームだけをセンタリングさせることができません。
できればテーブルは使いたくないので、何か良い方法があれば教えていただけると幸いです。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答3件
0
ベストアンサー
ブラウザ対応範囲にもよるので、要望通りかわかりませんがこういうことでしょうか。
css
1#wrapper { 2 text-align:center; 3} 4 5.container { 6 margin-bottom:15px; 7} 8 9.container span { 10 padding-right:10px; 11 position:absolute; 12 transform:translate(-100%,-0.2em); 13 line-height:1.8; 14} 15 16.container input { 17 width:150px; 18} 19 20.container textarea { 21 width:300px; 22}
html
1<div id="wrapper"> 2 3<div class="container"> 4<span>文字列が入ります</span> 5<input type="text"> 6</div> 7 8<div class="container"> 9<span>文字列ながかったりしても大丈夫</span> 10<input type="text"> 11</div> 12 13<div class="container"> 14<span>見出しの長さは適当</span> 15<select name="" id=""> 16<option value="">フォームパーツの長さが</option> 17<option value="">バラバラだとこうなったりしますよ</option> 18<option value="">固定にする場合はwidth指定をしてください</option> 19</select> 20</div> 21 22</div>
投稿2015/07/29 02:55
編集2015/07/29 15:32総合スコア88
0
こんな感じはどうでしょう?
HTML
1<STYLE> 2dl{ 3 margin:0 auto; 4 border: 1px solid #333; 5 border-top: none; 6 width: 300px; 7} 8 9dt{ 10 padding:5px; 11 border-top: 1px solid #333; 12 float: left; 13 width: 5em 14} 15 16dd{ 17 margin-left: 5em; 18 padding: 5px; 19 border-left: 1px solid #333; 20 border-top: 1px solid #333; 21 _height: 1%; 22} 23</STYLE> 24<DL> 25<DT>文字列</DT><DD><INPUT type="text" /></DD> 26</DL>
投稿2015/07/29 02:22
総合スコア181
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
0
jQueryを使えば実現可能っぽいです。
CSS
1body { 2 margin: 0; 3 padding: 0; 4} 5#wrapper { 6 margin: 0; 7 padding: 0; 8 position:relative; 9 10} 11#form-area{ 12 width: 300px; 13 height: 100px; 14 margin: auto; 15} 16.text-line { 17 margin: 0; 18 padding: 0; 19 display: inline-block; 20 position: absolute; 21}
javascript
1$(function() { 2 var ans = $("#form-area").offset(); 3 var x = ans.left; 4 var y = ans.top; 5 $(".text-line").css('top', y); 6 $(".text-line").css('left',x - 10); 7 8 $(".input-area").on('keyup', function() { 9 var current_width_px = $(".text-line").css('width'); 10 var current_width_int = parseInt(current_width_px.replace('px', '')); 11 $(".text-line").css('left', x - current_width_int - 10); 12 $(".text-line").text($(this).val()); 13 }); 14});
html
1<body> 2 <div id="wrapper"> 3 <div class="text-line"></div> 4 <form id="form-area" method="post" action="."> 5 <input type="text" class="input-area" /> 6 </form> 7 </div> 8</body>
とりあえずサンプルはこんな感じで。
jQueryはどこかから適当に読み込んでください。
上記ソースですと、テキストボックスに入れた文字列が左に伸びていきます。
投稿2015/07/29 02:18
総合スコア634
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2015/07/29 03:44
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2015/07/29 03:50
2015/07/29 15:34