htmlで中央揃えしたフォームの左に文字列を入れたい

初歩的な質問失礼します。

画面の真ん中に入力フォームを置き、そのすぐ左に文字列を入れたいと考えています。
フォームの位置は真ん中で固定させ、文字列は長さに応じて左方向に伸びていく感じです。
しかし、文字列とフォームの2つを合わせた全体をセンタリングすることはできるのですが、
フォームだけをセンタリングさせることができません。

できればテーブルは使いたくないので、何か良い方法があれば教えていただけると幸いです。

行動規範の内容に同意します

回答3件

ベストアンサー

ブラウザ対応範囲にもよるので、要望通りかわかりませんがこういうことでしょうか。

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

webnohito

総合スコア88

退会済みユーザー

2015/07/29 03:50

ご回答ありがとうございます。私がやりたかったことをピンポイントで教えてくださり、大変参考になりました。個人的に一番要望に近かったのです。ありがとうございました。

webnohito

2015/07/29 15:34

お力になれましたら幸いです。

行動規範の内容に同意します

こんな感じはどうでしょう？

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

NIA

総合スコア181

退会済みユーザー

2015/07/29 03:46

ご回答ありがとうございます。 dlタグを使うというのは、正直まったく思いつきませんでした。大変参考になりました。ありがとうございます。

行動規範の内容に同意します

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

yu-ri

総合スコア634

退会済みユーザー

2015/07/29 03:44

ご回答ありがとうございます。私の質問がわかりにくすぎたのですが、テキストボックスに入れた文字列を左側に表示させていくのではなく、左側にはあらかじめ文字数不明の文字列を表示させておくというものでした。そのうえで文字数に関わらず、テキストボックスの位置はセンタリングさせたいという質問でした。わかりにくくて申し訳ありません。 jQueryの勉強もしているので、参考にさせていただきたいと思います。ありがとうございました。

行動規範の内容に同意します

あなたの回答