街中で見かけて「グッときた人」の思い出

<li>内の<ul>を横に表示する方法

解決済

  • 質問者：p_taro
  • 質問日時：
  • 回答数：8件

<li>内の<ul>を横に表示する方法がわからずに困っています。

例えば
<ul>
<li>野菜
<ul>
<li>大根
<li>にんじん
</ul>
</li>
<li>果物
<ul>
<li>りんご
<li>バナナ
</ul>
</li>
</ul>

これを以下のように表示させたいのです。
・野菜　　　・大根
　　　　　　 ・にんじん
・くだもの　・りんご
　　　　　　　・ばなな

この場合、CSSはどのように記載すればいいのでしょうか。
ご存知の方、ご教授頂けると幸いです。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (8件)

No.6ベストアンサー

  • 回答者： hetare560
  • 回答日時：

こんにちは。



以下をスタイルに記述すればできると思いますけど。

ul li {
position:relative;
top:0;
left:0;
width:100px;/* 任意の数値 */
}

ul li ul{
position:absolute;
top:0;
left:100px;/* 任意の数値 */
width:100px;/* 任意の数値 */
clear:left;/* 一応 */
}
    • good
    • 0
    • 件
通報する
この回答へのお礼

お返事遅くなりすみません。
ご回答ありがとうございます！勉強します！

通報する
お礼日時：2009/01/24 01:33

No.8

  • 回答者： DrFell
  • 回答日時：

ソース代行は嫌いなんで考える余地を残した未完成品を



まずは、正しいhtmlを書いてください。
正しいhtmlに非論理・見た目思考のバージョンを書いてみました
ul li{line-height:1.2em;list-style-position:inside;}
ul li ul{margin-top:-1.2em;}

文字が重なると思います。リストであることを頭において考えると理解していれば調整は簡単に出来ると思います。「ご存知の方」ではありませんでしたが、普通に考え組み合わせればできました。＃7さんの「とりたてて難しくない」は本当だと思います。人のソースをコピーしてるだけの人には無理でしょうけどね。
    • good
    • 0
    • 件
通報する
この回答へのお礼

お返事遅くなりすみません。
ご回答ありがとうございます！勉強します！

通報する
お礼日時：2009/01/24 01:31

No.7

  • 回答者： abril
  • 回答日時：

> floatやpositionを使うのは難しいのでしょうか…



ANo.2で「難しいかも」と書いたのは、それらを使用しての実現自体が困難という意味ではなく、「floatやpositionの理屈（性質）」をきちんと把握し理解していないと、適切な指定がなかなかできず調整に苦労する可能性がある、という意味です。理屈がわかっていればとりたてて難しくはないです。
ただ、このあたりのプロパティは今までの経験からすると、理解がおぼつかないで漠然と使用されている方も少なくない様で、その様な状態だとこちらも説明するのがちょっとしんどかったりするのです。なのでANo.2では（仮に質問者様がそういうレベルであった場合に）floatやpositionを使用しなくても済む比較的理解しやすい方法だけを書かせて頂きました。
ANo.1の補足を見る限り、ANo.5様も指摘されていますが、残念ながら質問者様はまだこれらのプロパティをよく理解しておられない段階だと察せられます。なのですみませんが今回は「（floatやpositionを使用した）具体例」は割愛させて頂きます。ANo.6様がpositionを使用したサンプルを出されている事ですし、そちらを参考にするのと併せて各プロパティの仕様をこの機会にじっくり確認して理解を深める事をお奨めします。
    • good
    • 0
    • 件
通報する
この回答へのお礼

お返事遅くなりすみません。
ご回答ありがとうございます！勉強します！

通報する
お礼日時：2009/01/24 01:32

No.5

  • 回答者： SAYKA
  • 回答日時：

><li style="float:left">野菜


><ul style="float:left">
><li>大根

floatの使い方が誤っているね。
だって指定した要素「に続く要素」を回り込ませる指定だし。

それとliの後にulが有るから解り辛いけど実際には大きなliという箱(とその周りのli)と、それとは別のその中に有るulという箱(とその周りの文字とか隣接ul)で指定の効果は全然別。

これによって外側のliに内側のulが横並びになる事は無いよ。
上位のliが手前の(同階層の)liに並んで表示される格好になってるんじゃない？
    • good
    • 0
    • 件
通報する
この回答へのお礼

お返事遅くなりすみません。
ご回答ありがとうございます！勉強します！

通報する
お礼日時：2009/01/24 01:33

No.4

  • 回答者： abril
  • 回答日時：

ANo.3です。

すみません…もう一つ間違ってました。ANo.3の訂正はANo.2に対するものであり、ANo.1様ではありません。ANo.2,3,4が同一回答者（abril）です。紛らわしい事をして失礼しました。
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： abril
  • 回答日時：

ANo.1です。

すみません、コピペの際、一箇所タイポがありました。
【誤】
<li>野菜</li>
【正】
<li>野菜
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： abril
  • 回答日時：

横並びにする場合は、floatかpositionを使う事が多いかと思います。

これはある程度それぞれのプロパティの理屈がわかっていないと調整が難しいかもしれません。
もしも、リストのメイン・カテゴリの項目の長さが大体決め打ちできるなら、すごく大雑把な方法として、サブ・カテゴリのリストのマージンを上方向に一行分マイナスにして、左方向にメインカテゴリの項目分（＋α）のマージンを与える、という手もあります。
----------------------------------------------------------------------
【HTML】
----------------------------------------------------------------------
<?xml version="1.0" encoding="shift_jis"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>サンプル</title>
<link rel="stylesheet" type="text/css" href="css/sample.css" media="all" />
</head>

<body>
<div id="contents">
<ul class="hoge1">
<li>野菜</li>
<ul class="hoge2">
<li>大根</li>
<li>にんじん</li>
<li>ほげほげほげほげほげほげほげほげほげほげほげほげほげ</li>
</ul>
</li>

<li>果物
<ul class="hoge2">
<li>りんご</li>
<li>バナナ</li>
<li>ほげほげほげほげほげほげほげほげほげほげほげほげほげ</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
----------------------------------------------------------------------
【CSS】
----------------------------------------------------------------------
body {
font-size: 12px;
padding: 0;
margin: 0;
}
div#contents {
width: 500px;←これは親要素の幅。分かり易い様に仮に入れてあります。
}
ul {
list-style-type: disc;
line-height: 140%;
padding: 0 0 0 1.5em;
margin: 0;
}
ul li {
padding: 0;
margin: 0;
}
ul.hoge2 {
margin: -1.5em 0 0 5em;←ここでマージンを調整
}
----------------------------------------------------------------------
ただしこの方法だと、メイン・カテゴリの項目名（「野菜」「果物」）の長さが、ul.hoge2の左マージンより長くなってしまった場合は（折り返したりしないので）サブカテゴリの項目名と重なってしまいます。ですので、必ずメインカテゴリの項目名が入りきる長さを決め打ちできる場合に限ります。また、サイズやフォントの種類やサイズ、行間によっては、各環境でのサブカテゴリの揃い方が微妙に異なってきますのであくまでとりあえず的な方法です。そういう要因に左右されない横並びの2ボックス状態を作りたければ、やはりfloatなりpositionなりを使いこなす必要が出てきます。
※蛇足ですが、<li>の閉じタグ</li>は省略しない様にしておいた方が宜しいです。ちなみにサンプルのDOCTYPEでは閉じタグは必須、省略不可です。
    • good
    • 0
    • 件
通報する
この回答へのお礼

とてもご丁寧な解説、ありがとうございます！
やはりfloatやpositionを使うのは難しいのでしょうか…
お手すきのお時間ありましたら、参考までに具体例をお教え頂けると幸いです。

通報する
お礼日時：2008/09/05 18:19

No.1

  • 回答者： SAYKA
  • 回答日時：

inline化するかfloatを使うとできるんじゃないかな。





http://www.tohoho-web.com/css/reference.htm#disp …
http://www.tohoho-web.com/css/reference.htm#float

この回答への補足

floatは次のに試してみましたができませんでした。
<ul>
<li style="float:left">野菜
<ul style="float:left">
<li>大根
<li>にんじん
</ul>
</li>
<li style="float:left; clear:both;">果物
<ul style="float:left">
<li>りんご
<li>バナナ
</ul>
</li>
</ul>

inline化も以下のようにしてみましたが、ダメでした。
<ul>
<li style="display:inline">野菜
<ul>
<li>大根
<li>にんじん
</ul>

補足日時：2008/09/05 15:34
通報する
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報