• 締切済み

横並びリストでの改行

リストをcssでフロートで横並びにした場合の話ですが、 たとえば、項目が5つあって、liのwidthを指定せずに500pxのボックスの中に横並びにすると、5つの合計の幅が500pxでおさまる場合は問題ないのですが、おさまらない場合、IEで項目の途中で改行されてしまいます。 li { white-space: nowrap; } で改行させないようにすることはできるのですが、これだと、1項目の中身が500pxを超えてしまうような長文の場合、逆に突き抜けてしまい困っております。 何かよい方法があればご教授いただけると助かります。

  • sr-ki
  • お礼率68% (43/63)
  • CSS
  • 回答数1
  • ありがとう数2

みんなの回答

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

改行させないで、つきぬけないならどうしたいのでしょう？ その辺を書かないと、命題が矛盾してしまいます おそらくoverflow:hidden的な解決方法を希望しているのだとは 思いますが・・・

sr-ki
質問者

補足

説明不足で申し訳ありません。。。 つまり、上の例ですと、li { white-space: nowrap; } なら、5つあるli要素の合計が500pxを超える場合はli要素単位で下に落ちるのでのですが、↓ 【li要素1】　【li要素2】　【li要素3】 【li要素4】 ひとつのli要素だけで500pxを超えるような長文の場合、li要素内では改行しないので、 【li要素1li要素1li要素1li要素1li要素1li要素1li要素1li要素1】 ↑のように突き抜けてしまうので、↓のように改行するようにしたいのです。その場合、li { white-space: nowrap; }は使えないと思うので何か良い方法があれば と思ったわけです。 【li要素1li要素1li要素1li要素1li要素 1li要素1li要素1li要素1】 【li要素2li要素2li要素2li要素2li要素 2li要素2li要素2li要素2】

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • CSSでリスト横並び…そしてそれを中央へ

    CSSでリスト横並び…最近知った物ですが、問題が絶えません…。以下のようにして、CSSでリストを横並びにしたのは良いのですが、それを中央表示させたいため、ネットで色々と調べ、それを真似ているのですが、うまく中央へ表示されません。一体何が悪いのでしょうか？ 最初は ul も利用していましたが、あるサイトのソースだと ul を利用していなかったので省いたところ、変化なかったので、省いたままにしています。 +++ CSS ソース +++ #smenu { clear: both; margin: 0 auto; padding: 20px 0; width: 900px; height: 50px; white-space: nowrap; list-style-type: none; text-align: center; } #smenu li { float: left; margin: 0 auto; padding: 2px 10px; text-align: center; } #smenu a　{ display: block; text-align: center; } +++ HTML ソース ++++ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <div id=smenu> <li><a href="#">AAA</a></li> <li><a href="#">BBB</a></li> <li><a href="#">CCC</a></li> </div> よろしくお願いします。

    • ベストアンサー
    • HTML
  • メニューの横並びで改行されてしまう。

    ul　li　を使用して、横並びのメニューを作成したいのですが、 最後の項目が、横に並びきれなくて、下の段に移ってしまいます。 border幅や、marginも計算してpxで指定しているつもりですが、上手くいきません(TдT) 何故ですかね？ HTML <body> <div id="wrapper"> <header> <nav> <ul> <li><a href="#">about</a></li> <li><a href="#">information</a></li> <li><a href="#">party</a></li> <li><a href="#">access</a></li> <li><a href="#">contact</a></li> </ul> </nav> </header> <!-- /wrapper --></div> CSS #wrapper { width: 985px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; } nav ul { list-style-type:none; } nav li { float:left; width:190px; border: 1px #ffb366 solid; text-align:center; margin-right:5px; }

    • ベストアンサー
    • CSS
  • 横並びのリストが・・・

    リストでテキストを横並びにしたいのですが、IEの表示の場合のみ一番右端のテキストが縦書きになってしまいます。解消するにはどうすれば良いでしょうか？ ※IEの文字サイズを小にした場合のみ、他の文字サイズの場合はきちんと端で改行し正しくおさまります。 <STYLE type="text/css"> <!-- div{width:910px;} ul{margin:0; padding:0; font-size:70%; padding:0 10px 0 0;} li{list-style:none; border-right:solid 1px #ddd; float:left; padding-right:10px; margin:5px 0 5px 10px; height:10px;} --> </STYLE> <div> <p> <ul> <li>あああああ</li> <li>あああああ</li> <li>あああああ</li> <li>あああああ</li> <li>あああああ</li> <li>あああああ</li> <li>あああああ</li> <li>あああああ</li> <li>あああああ</li> <li>あああああ</li> <li>あああああ</li> <li>あああああ</li> <li>あああああ</li> <li>あああああ</li> <li>あああああ</li> <li>あああああ</li> <li>あああああ</li> <li>あああああ</li> <li>あああああ</li> <li>あああああ</li> <li>あああああ</li> <li>あああああ</li> <li>あああああ</li> <li>あああああ</li> <li>あああああ</li> <li>あああああ</li> <li>あああああ</li> <li>あああああ</li> <li>あああああ</li> <li>あああああ</li> <li>あああああ</li> <li>あああああ</li> <li>あああああ</li> <li>あああああ</li> <li>あああああ</li> <li>あああああ</li> <li>あああああ</li> <li>あああああ</li> <li>あああああ</li> </ul> </p> </div>

    • ベストアンサー
    • HTML
  • CSSでリスト横並び…そしてそれを中央へ　その2

    すみません、つい先日同様の質問をし、良回答を得られたと早とちり締め切ってしまいましたが、まだ問題が続いてました。 以前の質問と回答 http://oshiete1.goo.ne.jp/kotaeru.php3?q=2335571 頂いた良回答は Firefox ではうまく行きましたが、IEだとやはりまだ左寄せ状態で表示されてしまいます。 その他頂いた回答はDOCTYPEを変えております、確かに中央に寄ったのですが、あのDOCTYPEですとIEとFirefoxで padding の捕らえ方が変わるため、できればあのDOCTYPEは使用したくはありません。 ========= 以下、前質問より ============ CSSでリスト横並び…最近知った物ですが、問題が絶えません…。以下のようにして、CSSでリストを横並びにしたのは良いのですが、それを中央表示させたいため、ネットで色々と調べ、それを真似ているのですが、うまく中央へ表示されません。一体何が悪いのでしょうか？ 最初は ul も利用していましたが、あるサイトのソースだと ul を利用していなかったので省いたところ、変化なかったので、省いたままにしています。 +++ CSS ソース +++ #smenu { clear: both; margin: 0 auto; padding: 20px 0; width: 900px; height: 50px; white-space: nowrap; list-style-type: none; text-align: center; } #smenu li { float: left; margin: 0 auto; padding: 2px 10px; text-align: center; } #smenu a　{ display: block; text-align: center; } +++ HTML ソース ++++ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <div id=smenu> <li><a href="#">AAA</a></li> <li><a href="#">BBB</a></li> <li><a href="#">CCC</a></li> </div> よろしくお願いします。

    • ベストアンサー
    • HTML
  • cssでリストを横並びのセンタリング

    現在、サイトをHTMLからHTML5に移行中なのですが、リストを横並びにするところまではできたのですが、それをセンタリングするにはどうしたら良いでしょうか？ さまざまなサイトを巡ってやり方を拝見したのですが、目的とするものがありませんでした。 現在のHTML <!-- ヘッダ開始 --> <div id="header"> <h1>サイトタイトル</h1> <p class="catch"><strong>サイト説明</strong></p> <div class="opening"> <h2><img src=".jpg" alt="表示されなかった画像の説明的な" width="900" height="260"></h2> </div> <ul class="nl clearFix"> <li class="active"><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> <li><a href="#">７</a></li> </ul> <hr class="none"> </div> <!-- ヘッダ終了 --> 現在のcss /* --- ヘッダメニュー --- */ #header ul.nl { width: 100%; /* IE 6のために幅の指定が必要 */ margin: 0 auto; padding: 0; background-color: #ffffff; /* ヘッダメニューの背景色 */ list-style-type: none; text-align: center; } /* メニュー項目 */ #header ul.nl li { width: 124px; /* 項目の幅 */ float: left; line-height: 100%; } /* 最初の項目と最後の項目 */ #header ul.nl li.first, #header ul.nl li.last { width: 125px; /* 項目の幅 */ } わかりにくいと思いますが、上のように配置したいのです。 まだイマイチ理解しきれていないのですが、回答していただければと思います。 ↓HPの現状。 http://dateme.web.fc2.com/top.html

    • ベストアンサー
    • CSS
  • CSSを用いてリストを横並びにして、それを2行にまたがせる方法

    CSS を用いて、リストを横並びにしたのはいいのですが、そのリストの数が多く、2行にまたがらざるを得ません。 Firefox ですと枠内に入りきらないリストは自動的に改行して表示してくれるのですが、IE ですと入りきらないリストを右端に無理矢理表示（縦に伸びていきます）し、そのリストの次から2行目と移り変わります。 -- HTML -- <div id=content> <ul> <li><a href="">AAA</a></li> <li><a href="">BBB</a></li> <li><a href="">CCC</a></li> <li><a href="">DDD</a></li> <li><a href="">EEE</a></li> <li><a href="">FFF</a></li> </ul> </div> -- CSS -- #content ul　{ padding: 0; margin: 0; list-style-type: none; } #content li　{ float: left; display: block; padding: 2px 10px 0 5px; margin: 0; list-style-type: none; } 上記の例ですとEEEが1行目に入りきらない場合、Firefox では、EEEが2行目へとなって後が続きます。 IEですと EEE のうち E 1文字だけでも入ると残りの2文字は下方へずれて行きます。そして、FFFから2行目となります。 このIEでの不具合で良い解決法があれば、ご教授願います。 よろしくお願い致します。

    • ベストアンサー
    • HTML
  • width指定したTDでwhite-space:nowrapが効かない

    width指定したTDでwhite-space:nowrapが効かない ブラウザはIE6～8のみを想定しています。 下記のHTMLでは、2行目は正常なのですが、1行目のnowrapが働かず、改行がかかってしまいます。 列毎に幅を指定する必要があるので、1行目にはwidthを指定しているのですが、 どのようにすれば自動改行を禁止できるでしょうか。 <table style="table-layout: fixed;"> <tr> <td style="width: 50px; overflow: hidden; white-space: nowrap;">あああああああ</td> <td style="width: 70px; overflow: hidden; white-space: nowrap;">あああああああ</td> </tr> <tr> <td style="overflow: hidden; white-space: nowrap;">あああああああ</td> <td style="overflow: hidden; white-space: nowrap;">あああああああ</td> </tr> </table>

    • ベストアンサー
    • HTML
  • リストを横並びさせた時にできた左端の余白を消したい

    いつもお世話になっております。WEBサイト制作でご質問があります。 使用ソフトはDreamweaverCS5.5。個人的に公開するものなので、Chromeのみで確認しています。 リストを横並びにしてナビゲーションを作っているのですが、画像のように左端に余白ができてしまいナビゲーションが改行された状態になってしまいます。 【html】 <div id="hedder"> <ul class="navi"> <li class="top"><a href="#">top</a></li> <li class="about"><a href="#">about</a></li> <li class="profile"><a href="#">profile</a></li> <li class="event"><a href="#">event</a></li> <li class="link"><a href="#">link</a></li> </ul><br clear="all" /> </div> 【CSS】 ul.navi { list-style-type: none; } .navi li { display: inline; float: left; } .navi li a { text-indent: -9999px; display: block; height: 78px; } .navi li.top a { background-image: url(img/btn_top.gif); width: 189px; } .navi li.about a { background-image: url(img/btn_about.gif); width: 190px; } .navi li.profile a { background-image: url(img/btn_profile.gif); width: 189px; } .navi li.event a { background-image: url(img/btn_event.gif); width: 189px; } .navi li.link a { background-image: url(img/btn_link.gif); width: 193px; } <div id="wrapper">で幅950pxの指定をしています。 よろしくお願いします。 （画像の青い四角は意図的にあとから加えた物なので本来のデザインではないものです。）

    • ベストアンサー
    • CSS
  • リストが途中で切れていても背景色は表示されるようにしたい

    どうしても分らないので、教えてください。 リスト<li>を横並びにして、項目リンクを作成しているのですが、後々増えることを想定しています。 <li>Menu1</li> <li>Menu2</li> <li>Menu3</li> <li>Menu4</li> <li>Menu5</li> という状態で、Menu3部分で改行されたようにすると、背景色がMenu5のところで途切れてしまいます。 （※ベースのwidthを300px、liのwidthを100px、といった感じで改行させたように見せています） <li>Menu6</li>を記述しなくても、背景色が表示されるようにしたいのですが、 <div> <ul> <li></li> ... </ul> </div> 上記のように<div>で括り、背景色を指定しても、うまくできません。 括った<div>にheigthをピクセル指定すれば表示されますが、それだと、項目が増えるたびに変更しなければなりません。 また、<li>タグにはlist-style-imageも指定しているので、 <li></li> のような空タグを入れておくのもできません。 どなたか、良い方法がありましたら、教えていただけませんでしょうか？ よろしくお願いいたします。

  • 横並びのリストで左端がはみ出る

    リストを横並びにしてメニューバーを作ろうとしているのですが、CSSの参考書に書いてある通りにHTMLとCSSを書いても、添付ファイルのように、どうしても左端がはみ出てしまいます。 （この例ではわかりやすいようにli要素の左にボーダーを入れています） index.html <!doctype html> <html> <head> <meta charset="utf-8"> <title>TITLE</title> <link href="nav.css" rel="stylesheet" type="text/css"> </head> <body> <ul class="nav"> <li class="nav_item"><a href="index.html">ホーム</a></li> <li class="nav_item"><a href="#">リンク１</a></li> <li class="nav_item"><a href="#">リンク２</a></li> </ul> </body> nav.css .nav { display: table; width: 100%; table-layout: fixed; padding-top: 10px; padding-bottom: 10px; background-color: #dddddd; } .nav_item { display: table-cell; border-left: thick solid #000000; } .nav_item > a { display: block; list-style-type: none; text-decoration: none; text-align: center; } どのブラウザで確認しても同じ現象です。 どうやったら正常に表示されるのか、おわかりになれば教えてください。

    • ベストアンサー
    • CSS

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する