ある要素内で、長さはランダムだが、一行には満たない左寄せの文章があります。
この右に右寄せでボタンを置きたいのですが、左の文章がある値以上長い場合は、ボタンを改行したラインに置きたいと思っています。
ご教授お願いいたします。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答2件
0
ベストアンサー
もし問題ないのであれば文章が入った要素を作成しwidthが可変になるようにして、以下のような状態を構築すると一応動作としては希望通りですがどうでしょうか?(Firefox 35.0.1にて)
以下のようにしなくてもJavaScriptを使用することで比較的簡単に実装できるとは思います。
lang
1<div style="width:40em" id="_wrap"> 2 <div style="width:auto;float:left" id="_text">AbcAbc</div> 3 <div style="width:20em;text-align:right"><input type="button" value="OK"></div> 4</div>
#_wrapでは幅の指定を40文字に指定し、#_textは中に入っている文字数によって幅が変化するようにしているため以下のような流れで下段へ移動します。(#_textの中身が20文字になった時点で下段にボタンが移動)
lang
1x=id_textの文字数(この例では20文字と考えてください); 2y=button要素を囲むdivのwidth(20em) 3z=(id_wrapのwidth(40em) - (x + y)); 4if(z<=0){ 5 button要素が下へ。 6};
追記:右寄せの部分を見落としていたので修正
bottonにtext-align:rightを追加しました。
投稿2015/02/09 16:20
編集2015/02/10 02:16総合スコア730
0
右寄せでボタンを置きたい
lang
1<table> 2 <tr> 3 <td>あいうえお・・・・</td><td><button>OK</button></td> 4 </tr> 5 <tr> 6 <td>かきくけこ・・・・</td><td><button>OK</button></td> 7 </tr> 8</table>
左の文章がある値以上長い場合は、ボタンを改行したラインに置きたい
lang
1<p style="width: 10em;">あいうえお・・・・ <button>OK</button></p>
いずれにせよ、ボタン要素はテキスト要素ではないので、テキスト要素と同列には扱えませんね。
投稿2015/02/09 16:07
総合スコア354
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/02/10 00:10
2015/02/10 02:20