- ベストアンサー
<li>内の<ul>を横に表示する方法
<li>内の<ul>を横に表示する方法がわからずに困っています。 例えば <ul> <li>野菜 <ul> <li>大根 <li>にんじん </ul> </li> <li>果物 <ul> <li>りんご <li>バナナ </ul> </li> </ul> これを以下のように表示させたいのです。 ・野菜 ・大根 ・にんじん ・くだもの ・りんご ・ばなな この場合、CSSはどのように記載すればいいのでしょうか。 ご存知の方、ご教授頂けると幸いです。
- みんなの回答 (8)
- 専門家の回答
質問者が選んだベストアンサー
関連するQ&A
- CSSでulとliを指定し横に並べたいです。
ulとliを使っても横に表示できる方法わかる方教えてください。 例 <ul> <li>あああ</li> <li>いいい</li> <li>ううう</li> <li>えええ</li> </ul> 普通は ・あああ ・いいい ・ううう ・えええ となってしまいますがこんな感じで作りたいのですが。 ・あああ ・いいい ・ううう ・えええ みたいに横にしたのですがどうやってやればいいかわかりません(泣) たぶんCSSで指定するのかと思ってますが、違うんでしたらそのやり方を教えてください。
- ベストアンサー
- HTML
- ul・liについて
ul・liを使って <ul> <li>みかん</li> <li>りんご</li> <li>レモン</li> </ul> というリストをつくったのですが(リストマークなし)、FirefoxとIEでは表示がだいぶずれてしまいます。(各行のインデントが発生する) これって妥協するしかないんですかね? ご回答よろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- ulとliを指定し横に並べて
テキスト2行、5個のリストをHTMLとCSSとjavascriptでulとliを指定し横に並べて、 2秒間1個のテキストのリストで止まって2秒たったら次のテキストのリストに動く スクリプトの作り方が知りたいです。
- ベストアンサー
- JavaScript
- <ul>タグで各<li>の中身を横方向羅列させつつ各項目を等幅に。
<ul>タグで各<li>の中身を横方向羅列させつつ各項目を等幅に。 以下のように、ulですが、横方向に羅列して表示される、 htmlソースと、CSSソースがあります。 で、これをもとにしつつ、(あるいはもとにしなくてもいいのですが)、 各項目・・・下の例では、 [サイトマップ] [ヘルプ] [お問い合わせ] の3つそれぞれを、等幅にして表示させたく思っています。 条件としては・・・ ●<ul>を使うことは必須。 ●cssハック的なものを使ってもかまいません。 ●できればJavaScriptを使いたくないですが、やむを得ない場合は、OKです。 ●もしやむをえなければ、たとえば、「各項目の、等幅化する前のwidthは、7em以内でないといけない」 などの条件がついてもかまいません。 以前、できたような気がするのですが・・・やりかたを忘れてしまいました。 ご存じのかたいらっしゃいましたら、お教えいただければ幸いです。 よろしくお願いいたします。 //----------------------------------------------------------- <html ソース> <ul class="miya-ul_lateral"> <li class="miya-li_lateral_first">サイトマップ</li> <li>ヘルプ</li> <li class="miya-li_lateral_last">お問い合わせ</li> </ul> //----------------------------------------------------------- <cssソース> /* 1st step: */ ul.miya-ul_lateral li{ display:inline; list-style-type:none; padding:0 2px 0 5px; margin:0; border-left:1px solid #000; } /* /1st step: */ /* 2nd step: */ ul.miya-ul_lateral li.miya-li_lateral_first{ border-left:0; padding-left:0; } /* 2nd step: */ /* 3rd step: */ ul.miya-ul_lateral li.miya-li_lateral_last{ padding-right:0; } /* 3rd step: */ よろしくお願いいたします。
- ベストアンサー
- HTML
- cssの記述について教えてください、<ul><li>
cssの記述について教えてください。勉強不足で<li>タグだけなら正常に表示できるのですが、無理に<ul>タグを追加すると型崩れしてしまいます。<ul>タグは必須としていれなくてもいいですか??<li>タグのみで
- ベストアンサー
- ホームページ作成ソフト
- エクセル グループごとの検索について
グループごとを検索し、その情報を縦列に表示したいのですが、悩んでおります。 横に表示するのは、以下の関数を使って出来たのですが、 =IF(ISNA(MATCH(COLUMN(A4)&$A4,sheet1!$E$2:$E$700,0)) これだと使い勝手が悪く、困っております。 例えば (sheet1)の情報を、 品種 品名 金額 産地 果物 りんご1 200 津軽 果物1 果物 りんご2 250 むつ 果物2 果物 みかん 300 果物3 果物 ぶどう 400 果物4 ーーーーーーーーーーーーーーーーーーーーーーーー 海外果物 パパイヤ 300 海外果物1 海外果物 アドカボ 100 海外果物2 海外果物 バナナ 130 海外果物3 ーーーーーーーーーーーーーーーーーーーーーーーー 野菜 なす 100 野菜1 野菜 にんじん 200 野菜2 野菜 きゃべつ 300 野菜3 野菜 大根 150 練馬 野菜4 野菜 大根2 180 京都 野菜5 (sheet2)において [A]又は[B]のある位置のセルに、品種(この場合、野菜)を打ち込むと、 [ A ] [ B ]なす 100 にんじん 200 きゃべつ 300 大根 150 練馬 大根2 180 京都 このように、品名と値段、産地が縦に並んで欲しいのです。 どうぞお知恵を貸して下さいませ。 宜しくお願いします。
- ベストアンサー
- オフィス系ソフト
- CSSで<ul><li>タグを使ってどのブラウザでも同じように表示させたい。
.ul { width: 120px; height: auto; float: left; font: 12; line-height: 150%; padding: 0; list-style-image: url(img/side-tab.gif); } .li { font-size: 12px; margin-left: 1.5em; } <ul class="○○○"> <li>11111</li> <li>22222</li> <li>33333</li> <li>44444</li> <li>55555</li> <li>66666</li> </ul> このようなコードでlistの頭には画像を使いたいのですが、どうしてもブラウザごとに表示がばらばらになってしまいます。 横幅は185pxまででおさめて、かつlistの画像とテキストが同じ列に表示されるようにしたいと考えています。 唯一firefoxだけが思うように表示できました。 IE6と7でも違う表示になりました(IE6だとかなり右寄り) operaに関しては画像とテキストの縦位置がずれてしまっていました。 CSSに関してはいろいろいじってて、なにがなんだがわからない状態になってしまいました・・ これを一つのCSSできれいに表示することは不可能でしょうか? どうかよろしくお願致します。
- ベストアンサー
- HTML
- tableにul,または,olを入れられますか?
<table> <tbody> <th>くだもの</th> <td><ul><li>りんご</li><li>みかん</li><li>すいか</li></td> …etcとして くだもの ・りんご ・みかん ・すいか としたいのですが、 <table>の<tbody>の<td>の中に<ul>の<li>を入れる方法は HTMLの仕様に反していますでしょうか?
- ベストアンサー
- ホームページ作成ソフト
- ul li を使ったリストを作りたいんですけど。。。
CSS初心者です。 ul liを使ってこんな感じのリストを作りたいんですけど うまくいきません。 ↓ ------------------------------------ ああああ いいいい うううう ええええ おおおお かかかか きききき くくくく けけけけ ここここ ささささ しししし すすすす せせせせ そそそそ ------------------------------------ なんとか作ってはみたんですが、IE7ではなんとかそれらしく 表示されますが、Opera9で確認すると うまく表示されません。 (「あ」の後に改行されずに「い」がきてしまったり・・・) すいません。 どなたか分かる方がいれば教えてください。 よろしくお願いします。
- ベストアンサー
- HTML
- <LI>タグで横に表示したい
今、ホームページを作っているのですが LIタグを用いて、どうしても横に表示したい部分があるのです。 普通なら <UL> <LI>あ <LI>い <LI>う </UL> で ・あ ・い ・う と表示されるのを あ い う ・・・のように・・・ http://kabocha.org/wangando/index.html このサイトのスタイル選択で、「斜めの見出し」を選択すると そのようになるのですが これと全く同じことをしたいのです。 教えてください! ここまでこだわってる理由は、上記のサイトでも使われている いちゆうさんの、スタイルシート切り替えスクリプトを使いたいからです。 http://critical.s6.xrea.com/web/cssselect.shtml
- ベストアンサー
- HTML
お礼
お返事遅くなりすみません。 ご回答ありがとうございます!勉強します!