- ベストアンサー
display: inlineと自動的な折り返し
naokitaの回答
- naokita
- ベストアンサー率57% (1008/1745)
・何故、divなのか意味不明・・・ それはリストじゃないの？ ・日本語は右端で折り返すので、単語か文章か判断せずに改行される仕様。 （新聞だって単語でも漢字でも途中で改行してますけどね・・・） ＞中途半端 ？ 単語単位で改行させたくないという意図なら、 <ul class="com"> <li>アップル</li> <li>マイクロソフト</li> <li>インテル</li> <li>グーグル</li> <li>ソニー</li> <li>ノキア</li> </ul> ul.com li{ display: inline; white-space: nowrap;}
関連するQ&A
- span要素にのみwhite-space: nowrapを指定したい
CSSによる改行指定が思う様にできなくて困っています。 幅400pxのボックスの中で、<span>～</span>の間では改行せず、</span>と<span>の間で自動改行するようにしたいと考えています。 スタイルシートに div{width:400px;} span{white-space: nowrap;} HTMLに <div> <span>type1</span><span>type2</span><span>type3</span>... </div> のように表記したのですが、実際にはdivで指定した幅を無視してどこまでも改行なしで表示されてしまいます。 どのように指定すれば目指している形にできるでしょうか？
- ベストアンサー
- HTML
- winのIEで正しく表示させたい
一行に、画像3つを左寄せ、画像2つを右寄せに表示しようとしています。 macのIE5、NN7、winのNN7での確認では、なんとか思うとように表示できたのですが、winのIEではどうにもなりません。 ソースは以下のように作っております。 <html> <div class="icon"> <img A> <img B> <img C> </div> <div class="inquiry"> <img D> <img E> </div> </html> ......... CSS .icon { margin-left: 140px; font-size: 12px; color: #333399; float: left; vertical-align: middle; white-space: nowrap; } .inquiry { margin-right: 30px; float: right; vertical-align: middle; white-space: nowrap; } ちなみに長くなるので省きましたが、右寄せの2つの画像はジャバスクリプトでカーソルが乗ると変わるようにしてあります。
- 締切済み
- HTML
- 2行目のブラウザ表示以上を省略
下記CSSで1行のブラウザ表示以上だと1行目の表示以上は省略されるが 1行は省略されなく折り返し 2行目のブラウザ表示以上を省略するにはどうしたらいいのでしょうか。 <div id="mapPos" style="height: 3em; width: 96%; margin: 0 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-text-overflow: ellipsis; -o-text-overflow: ellipsis;"> あああああああああああああああああああああああああああああああああああああああ </div>
- ベストアンサー
- CSS
- MSXMLでXMLファイルの読込みについて(改行によるエラー)
はじめまして、最近MSXMLを使った仕事をしています。 本日いろいろテストしていたのですが、タグ間の改行の入り具合によってXMLファイルがうまく読み込めない場合があります。 具体例としまして 1)要素ごとに改行されている場合 -> 成功します。 <A> <B> ... </B> </A> 2)改行無しの場合 -> 失敗します。 <A><B>...</B></A> 3)中途半端に改行が入る場合 -> 失敗します。 <A><B> ...</B> </A> 4)ルートタグ以外を一行で記述 -> 成功します。 <A> <B>...</B> </A> XMLファイルを生成するところできちんと整形すればエラーは起きないようにプログラムを作成できるのですが、どうも納得がいきませんしあまり良い製品とはいえません。このような現象にあわれた方アドバイス宜しくお願いします。 解決法がわからなくともこのような現象があるかどうかわかるだけでも参考になります。dllのバージョンはmsxml4.dllです。(MSXML4.0SP2をinstall) 宜しくお願いいたします。m(_ _)m
- 締切済み
- C・C++・C#
- height:100%について
height:100%について 質問させて頂きます。 例えば、divをheight100%,他は適当で定義したとするとその要素は一応ブラウザの上から下まで伸びてくれます。 しかしながらその状態でブラウザを中途半端なサイズにリサイズすると、下まで伸びなくなってしまうのです。途中で切れてしまう感じです。 fixedではリサイズに対応して常に伸びきってくれるのですが、absoluteでは上手くいかないのです。 absoluteでこれを解決する方法を教えて頂けたら幸いです。
- ベストアンサー
- CSS
- ワードの原稿用紙モード入力時、中途半端に改行
ワードの原稿用紙モードで入力時にたまにあるのですが、 一行が２０文字なのに中途半端なところで改行されます。 設定ミスなのでしょうが、下手に触るとかえっておかしく なりそうで…。（今の状態はページ後半あたりの行の17文字 目で次の行に改行します）その後も同様に同位置で改行されます。 まるでそこからは17文字の位置で設定したように！18文字目には 入力されません。 また、これもまた以前から腑に落ちないのですが、 誤って次の行に入力してしまった時、元の位置に戻そうと 先頭文字にカーソルを合わせてバックスペースで戻ろうとすると、 何度やっても戻らず、十回程度カチカチするとやっと元の 位置に戻るのです。逆に不必要にバックしたりで入力に無駄が 多くなってしまいます。 あまりワードを使いこなせていなく、分かる範囲でワードの設定は やりましが、お知恵を拝借いただけますでしょうか？
- 締切済み
- オフィス系ソフト
- 入力された文字列からリンクタグを生成
お世話になります。 ブラウザから、一行テキストに入力された文字列を使用してリンクタグを生成する挙動を構築していますが、肝心のリンクタグ（ aタグ等 ）が反映されずに悩んでいます。 普段PHPでプログラミングを行っていますので、一旦PHPで変数に置き換えたり、データベースを介したり様々な方法を試みましたが、中々うまくいかずにいます。 -- 【 JavaSの定義箇所 】 ------------- <script type="text/javascript"> <!-- function textcopy(){ var text1 = document.getElementById("text1").value; document.getElementById("text1").value = ""; text1 = document.getElementById("insert1").innerHTML + text1; document.getElementById("insert1").innerHTML = "<div>" + text1 + "</div>"; var text2 = document.getElementById("text2").value; document.getElementById("text2").value = ""; text2 = document.getElementById("insert2").innerHTML + text2; document.getElementById("insert2").innerHTML = "<div>" + text2 + "</div>"; var text3 = document.getElementById("text3").value; document.getElementById("text3").value = ""; text3 = document.getElementById("insert3").innerHTML + text3; document.getElementById("insert3").innerHTML = "<div>" + text3 + "</div>"; var text4 = document.getElementById("text4").value; document.getElementById("text4").value = ""; text4 = document.getElementById("insert4").innerHTML + text4; document.getElementById("insert4").innerHTML = "<div>" + text4 + "</div>"; var text5 = document.getElementById("text5").value; document.getElementById("text5").value = ""; text5 = document.getElementById("insert5").innerHTML + text5; document.getElementById("insert5").innerHTML = "<div>" + text5 + "</div>"; } //--> </script> -- 【 form部品の箇所 】 -------------- <form> <input type="text" id="text1" value="<a href='"> <input type="text" id="text2"> <input type="text" id="text3" value="'>"> <input type="text" id="text4"> <input type="text" id="text5" value="</a>"> <br /> <div id="insert1" style="display: inline-block;"></div> <div id="insert2" style="display: inline-block;"></div> <div id="insert3" style="display: inline-block;"></div> <div id="insert4" style="display: inline-block;"></div> <div id="insert5" style="display: inline-block;"></div> <button type="button" onclick="textcopy()">submitする</button> </form> ------------------------------- 例えば、 【 <a href='http://www.hoge.com'>テスト</a> 】の様に返したいのに、 【 http://www.hoge.com'>テスト 】と返ります。 HTMLタグは特殊文字に変換してみましたが、結果は同じでした。 因みにこの挙動がうまくいったら、type属性はhiddenにして隠し要素にするつもりでした。 恐らくこの様な面倒くさい構文より簡単な書き方があるかと思いますが、 今までJavaScript自体殆どタッチしていませんでしたので、調べながら 自分で構築してみました。 ご教示の程、どうぞよろしくお願い申し上げます。
- ベストアンサー
- JavaScript
- htmlで行数が増えた場合に自動的に範囲を広げる
現在、ホームページを作成しておりますが、htmlで表示させた場合に一行だけですと画面内に収まりますが、行数が増えていくとその下にあるボタンにかぶさってしまいます。 表示する行数が増えた場合に自動的に下に伸ばす方法はございますでしょうか？ HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="justsystems:HPB-Input-Mode" content="mode/flm; pagewidth=940; pageheight=1200"> <meta name="GENERATOR" content="JustSystems Homepage Builder Version 20.0.6.0 for Windows"> <title>タイトル</title> <link rel='stylesheet' href='/stylesheets/style.css' /> </head> <body bgcolor="#a9a9a9"> <table border="1" height="252" width="818"> <tr bgcolor="gray" style="color:white" height="50"> <th height="42" size=10><b>注文日</b></th> <th height="42" width="212">注文名/オプション<br>注文先・個数</th> <th height="42" size=10>合計金額/合計個数</th> <th height="42" size=20><b>注文者/入力者</b></th> </tr> ーーーここでテーブルから複数行取得 <% for(var i in content) { %> <tr bgcolor="lightyellow"> <% var obj = content[i]; %> <td align="center" height="47" size="10"> <input type="text" name=注文日 size="10" style="background:white; color:#000000;" align="middle" value="注文日"> </td> <td align="center" height="47" width="10" style="white-space:nowrap;" > <input type="text" name=注文名 size=4 style="background:white; color:#000000;" align="middle" value="注文名"> <input type="text" name=オプション size=1 style="background:white; color:#000000;" align="middle" value="無"> <input type="text" name=注文先 size=4 style="background:white; color:#000000;" align="middle" value="注文先"> <input type="text" name=単価 size=1 style="background:white; color:#000000;" align="middle" value="単価"> <input type="text" name=個数 size=1 style="background:white; color:#000000;" align="middle" value="個数"> </td> <td align="center" height="47" size=10> <input type="text" name=合計金額 size=10 style="background:white; color:#000000;" align="middle" value="合計金額"> <input type="text" name=合計数 size=10 style="background:white; color:#000000;" align="middle" value="合計数"> </td> <td align="center" height="47" size=20> <input type="text" name=注文者 size=20 style="background:white; color:#000000;" align="middle" value="注文者"> <input type="text" name=入力者 size=20 style="background:white; color:#000000;" align="middle" value="入力者"> </td> </tr> <% } %> <div style="width : 468px;height : 16px;top : 486px;left : 441px; position : absolute; z-index : 2; " id="Layer7" align="right"> <input type="submit" value=" 結果 "> <input type="button" value=" キャンセル "> <input type="button" value=" 戻 り "> </div> </form> </div> </body> </html>
- ベストアンサー
- HTML
- display:inlineで横並びにしたメニュー
のa:とa:hoverをbackground-imgでロールオーバーさせたいんですが、画像を大きく調整できません。line-heightとheightをいじってみましたが画像そのものの高さは変わりません。サイドメニューを作った時はDL,DT,DDでdisplay:blockでうまく出来ました。下記に現状のHTMLとCSSを記述しますのでよろしくおねがいします。 html側 <div id="banner_menu"> <ul> <li><a href="#">あいうえお</a></li> <li><a href="#">かきくけこ</a></li> <li><a href="#">さしすせそ</a></li> <li><a href="#">たちつてと</a></li> <li><a href="#">なにぬねの</a></li> <li><a href="#">はひふへほ</a></li> </ul> </div> CSS側 #banner_menu { clear: both; margin: 0px; padding: 7px 0 5px 15px; border-top: solid 1px #999; border-bottom: solid 1px #999; width: auto; margin-left: auto; margin-right: auto; background-color: #ffffff; } #banner_menu ul { text-align: left; padding-bottom: 1px; margin: 0px; } #banner_menu li { color: #ffffff; display: inline; padding-left: 7px; padding-right: 5px; border-left: solid 1px #999; width: 120px; } #banner_menu a { color: #4d4d4d; font-weight: normal; background-color: none; text-decoration: none; font-size: 12px; background: url(var_gry120x48.gif) no-repeat center center; line-height:20px; height: 20px; } #banner_menu a:hover { color: indianred; font-weight: normal; background: url(var_gry120x48_2.gif) no-repeat centert bottom; }
- ベストアンサー
- ブログ
- inlineは最適化で付けて無くても同じようにしてくれる？
VC++6で メソッドにinlineを付けると、実行速度が速くなるのでしょうか？ 最適化Option? or ReleaseでEXEを作ると、自動的にメソッドはinline付と同じようにしてくれるのでしょうか？ VCのプロにお聞きしたいです。
- ベストアンサー
- C・C++・C#