• ベストアンサー

CSSでのリストのマージン記述について

リストのマージンを左に他のli行と比べ、120pxずらして表示したい場合、 CSS表記を、 あらためて、クラスliを作って、margin : 0 0 0 120 ; としましたが、うまくいきません。 margin-left : 120px ; もダメでした。 ご存知の方、教えてください。 よろしくお願い致します。

noname#135595
noname#135595

質問者が選んだベストアンサー

  • ベストアンサー
  • torayoshi
  • ベストアンサー率62% (910/1449)
回答No.3

.m120 li を li.m120 としてみてください。 これはセレクタの優先順位に関係してるのかも知れません。

noname#135595
質問者

お礼

出来ました!! ありがとうございました。 継承?とかそういうのが、あるんですよね?! よくわからなくてやっているので、 助かりました!! ありがとうございました。

その他の回答 (2)

  • torayoshi
  • ベストアンサー率62% (910/1449)
回答No.2

考え方はそれで合ってると思います。 (margin:0 0 0 120px;は「左から」時計回りですよ ^^;) なんか複雑なリストなんでしょうか。 ↓こんな感じでうまくいきませんか? .li-lmove{ margin:0 0 0 120px; } <ul> <li class="li-lmove">項目1</li> <li>項目2</li> <li>項目3</li> <li>項目4</li> <li>項目5</li> </ul>

noname#135595
質問者

お礼

早速の回答ありがとうございます。 おっしゃる通りの意味合いであっています。(私のしたいことは、伝わっているようです)が、出来ません。。。 再度、ご教授していただけるとありがたいのですが、 補足のほうに、再度書きますので、 できましたら、お手数ですが、よろしくお願いします。 頼ってすみません。

noname#135595
質問者

補足

下記に記載しましたが、出来たら教えてください。 助かります。よろしくお願いします。 .site { margin: 0 0 10px 0; padding: 8px 8px 10px 8px; } .site ul { margin: 0; padding: 0 0 4px 0; } .m0 li { margin: 0; padding: 3px 0 3px 0; } .m120 li { margin: 0 0 0 120px; padding: 3px 0 3px 0; } そして、 <div class="site"><ul class="site"> <li class="m0">マージンなし</li> <li class="m120">右に120pxずれる</li></ul></div> こんなかんじにしました。 もしかしたら、ソフトが固まっているかもしれません。 ちょっと、反応が鈍くて、文字サイズを変えても、 変わらなくって、しまってきています。。。

  • torayoshi
  • ベストアンサー率62% (910/1449)
回答No.1

通常どんな要素でも「左端から」が初期値だから「左にずらす」ことは出来ないでしょう。 左にずらしたいliを初期値にして他のliを「右に120pxずらす」と 「左にずらしたいli」が「120px左にずれてるように」見せることは出来ますが。

noname#135595
質問者

お礼

ありがとうございます。 左ではなく、右にずらしたいのです。 間違えました。 できたら、右へ120pxずらす方法を教えてください。 よろしくお願いします。

noname#135595
質問者

補足

できれば、 margin : 0 0 0 120 ; のどこが間違っているのか教えてほしいです。 右から、上、右、下、左の指定で合っていると思うのですが。。。

関連するQ&A

  • 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
  • CSSについて リスト表示のリストマークの表示位置

    カテゴリをリスト表示すると左揃いにならず、 なぜが左に余計な空白というか空間ができてしまいます。 リスト表示のリストマークの表示位置をもっと左にするにはどうすればいいですか? /* カテゴリー */ div#sidebar-left li {font-size: 0.75em; list-style-type: none; background-image: url(listmark.png); background-repeat: no-repeat; padding-left: 16px; margin-bottom: 4px; vertical-align: top} div#sidebar-left li a{color: #000000; text-decoration: none} div#sidebar ul{padding: 0; margin: 8px 8px 20px}

  • CSSで思うようにいかないところがあります。

    現在CSS勉強中の初心者です。 CSSを使って、ナビゲーションシステムを作ろうと、本に書いてある通り、打ち込んでみたのですが、borderで囲まれた部分を1行にしたいのですが、なぜか、2行になってしまっているようです。上の行には表示させたい文字が書かれているのですが、下の行が空欄になってしまって、スペースができてしまいます。CSSの書き方が悪いのでしょうか?解決方法を教えてください。うまく説明できなくてわかりにくいかもしれませんが、宜しくお願いいたします。 CSSは以下です。 #nav { margin: 0px; padding: 0px; list-style: none; float:left; width:100%; } #nav li { float:left; background-color:#f0f0f0; border: 1px solid #000; font-size:12px; text-align:center; width:160px; height:20px; margin-top:1px; margin-right:0px; margin-left:3px; } #nav a{ color:#000; width:170px; height:20px; display:block; } #nav a:hover{ color:#fff; background-color:#0f314e; text-decoration:none; height:20px; } HTMLは以下です <ul id="nav"> <li><a href="">ホーム</a></li> <li><a href="">Gallery</a></li> <li><a href="">プロフィール</a></li> <li><a href=""></a>お問い合わせ</li> </ul>

    • ベストアンサー
    • HTML
  • リストの画像をくっつけたい!

    教えてください。 <ul> <li><img src="../img/link_a.gif" /></li> <li><img src="../img/link_b.gif" /></li> <li><img src="../img/link_c.gif" /></li> </ul> と画像をリストにした場合、画像と画像の間にblankができてしまうのですが、これは仕方がないのでしょうか? CSSでマージンを0pxにしても画像と画像がくっつきません。 #contentMenu li { width: 160px; height: 25px; margin-top: 0px; margin-right: 0px; margin-left: 0px; margin-bottom: 0px; } 教えてください。 よろしくお願いいたします。

    • ベストアンサー
    • XML
  • CSSでマージンを残しつつ中央そろえにする方法について

     こんにちは、Phoenix001と申します。  趣味でホームページ製作をしている者です(ただし割と初心者です)。  先日、ネットサーフィンをしてホームページ作成の参考になるサイトを探していた所、 http://www.gardenxgarden.com/ というサイトを発見いたしました。  このサイトはサイトのサイズが横800pxだと思うのですが、1200pxで開くと左右に均等にマージンがあり、ウィンドウを小さくするとマージンからなくなり、さらにウィンドウを小さくしてもページが崩れないように出来ています。  私はこのようにマージンを作りつつ中央にサイトがあり、ウィンドウを小さくするとマージンからなくなるページは始めて見たので是非自分でもやってみたいのですが、CSSの設定はどうやるのでしょうか?  練習用にHTMLとCSSのソースを作りましたので、これでやり方を示していただけると幸いです。  HTML、CSS内容がメニューとコンテンツの(参考サイトのページ3分割ではなく)2分割です。マージンのやり方なので問題はないと思います。  なるべく間違いがないように骨組みは(マージン以外)作ったつもりですが、間違えていたらご容赦ください。  どうぞ、よろしくお願いいたします。 ■練習用HTML <head> <title>マージンがあり、ウィンドウを小さくするとそこからなくなっていくサイトを作るには?</title> <link rel="stylesheet" type="text/css" href="index.css" media="screen,print"> </head> <body> <div id="main">■■←Mainで全体を覆いますよね?使用しない場合は消してください。 <div id="head"> <h1>マージンのあるサイト</h1> </div> <div id="menu"> <h2>リンク</h2> <ul> <li>マージン</li> <li>作りたいです</li> </ul> </div> <div id="content"> <p>マージンがあるのに中央にそろえられて、ウィンドウを小さくするとマージンから消えていくサイトは始めてみました。是非創ってみたいです。解答しやすくなるようにコンテンツのデータを入れてあります。</p> <h2>案内</h2> <p>HTML、CSSが分かる方、解答をお願いいたします。</p> <dl> <dt>マージン</dt> <dd>ページの余白のこと</dd> <dt>やり方</dt> <dd>分からないです</dd> <dt>作る意欲</dt> <dd>沢山あります。</dd> </dl> </div> </div> ■HTML終了 ■練習用CSS(いらないものは消して、いるものは追加してください。h1、h2は分かりやすくなるように入れています。) body { background-color: white color: black; margin-left : auto ; margin-right : auto ; } h1 { font-size: 1.6em; background-color: #480; color: white; padding: 0.2em; } h2 { font-size: 1.0em; border: 1px solid #480; padding: 0.2em; } p { line-height: 1.6em; } div#main { float: middle; width: 800px; } div#menu { float: left; width: 9em; background-color: white; margin-right: 1em; padding: 0.4em; } div#menu h2 { font-size: 1em; } div#menu ul { font-size: 0.9em; list-style-type: none; margin-left: 0; padding-left: 0.5em; } div#menu li { margin-bottom: 0.4em; } div#content { float: left; width: 80%; } div#content h2 { font-size: 1.2em; border: 1px solid #800; padding: 0.2em; } div > *:first-child { margin-top: 0; } ■CSS終了

    • ベストアンサー
    • HTML
  • safariでの横並びリスト(List)CSSずれについて

    CSSマスターの方にご質問させていただきます。 現在横並びリストを制作しようとしております。 リストに表示する文字の高さを中央揃えにし、カーソルが触れるまでは黒色画像、hover時に赤色画像のバックグラウンドをマイナス設定にてロールオーバー効果を演出しようとしています。 IEではきちんと表示されているのですがsafariではパディング分、赤色がズレてしまい、hover時には黒色がズレてしまいます。 <UL id="sitemenu"> <LI id="side">あいうえお <LI id="side">かきくけこ </UL> /***********LI設定***********/ #side A{ width:60px; //幅 height:40px; //高さ margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; background-image : url(背景.gif); //背景 background-position : 0px 0px; no-repeat; text-align : center; //文字の位置 text-decoration : none; //文字飾り vertical-align : top; //文字の高さ padding-top : 10px; //パディング高さ float : left; } #side A:hover{ background-position : 0px -40px; no-repeat; } /***********UL設定***********/ #sitemenu{ padding-top : 0px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; border-width : 0px 0px 0px 0px; vertical-align : top; text-align : left; list-style-type : none; float : left; } #sitemenu LI{ float : left; } なんとか背景画像がずれない様に表示させていので、どなたかわかる方がいらっしゃいましたら大変申し訳ないのですがご教授お願いいたします。

    • ベストアンサー
    • HTML
  • CSSレイアウト マージンについて

    下記のタグにてメインスペースを両側10pxにしたいのですが、うまくいきません。 下記のようなレイアウトにてうまくmarginなどを行う場合は どのようにしたらよろしいでしょうか? なお簡単にタグを記載してくださいますと幸いです。 CSS body {    margin:3em; color:#339900; background:#ffffff; } h1 { padding:0.1em; text-align:center; leter-specing:1em; border-top: 1px solid #000000; border-bottom: 1px solid #000000; } .mainspace { background:#aaaaaa; width:480px;       margin-right:10px;       margin-left:10px ; position:absolute; left:260px; } .leftmenu { background:#bbbbbb; width:200px; position:absolute; left:50px; } .rightmenu { background:#cccccc; width:200px; position:absolute; right:50px; } HTML <h1>メインタイトル</h1> <div class="mainspace"> <h2>サブタイトル</h2> <p> ただいまテスト中です。<br> ただいまテスト中です。<br> ただいまテスト中です。<br> ただいまテスト中です。<br> ただいまテスト中です。<br> </p> </div> <div class="leftmenu"> <ul> <li>メニュー</li> <li>メニュー</li> <li>メニュー</li> <li>メニュー</li> <li>メニュー</li> </ul> </div> <div class="rightmenu"> <ul> <li>メニュー</li> <li>メニュー</li> <li>メニュー</li> <li>メニュー</li> <li>メニュー</li> </ul> </div>

    • ベストアンサー
    • HTML
  • CSSの優先順位について

    うまく説明できるかわかりませんが・・・ XHTMLとCSSでページを作成しています。 デザインは全て外部CSSを参照しているのですが、 トップページだけ、一部個別設定したいと思っています。 リストメニューのデザインを現在このようにしています。(外部CSS) ul{ list-style-type:none; margin-left:0; padding-left:0; padding:0; margin-top:30px; width:120px; float:left } li{ padding-right:10px; font-size:0.75em; margin-bottom:10px; border-bottom:solid 1px #66aa66 } --------------------------------------- トップページだけ、 ul{ list-style-type:none; margin-left:0; padding-left:0; background-color:#efef77; padding:3px 20px; margin-top:0 } li{ display:inline; padding-right:10px; font-size:0.75em } ----------------------------------- この設定にしたいので、トップページヘッダーにこちらを入力しました。(外部CSSよりヘッダーを優先するとテキストに書いてありました) しかし、 li{ display:inline; } だけは、外部CSSを参照してしまいます。 なぜでしょうか?? 優先させる為に li display:inline !important; } としてみましたが、ダメでした。 どなたかご教授願いますm(__)m

  • 箇条書きの、項目間のマージンをCSSで空ける

    箇条書きの項目間のマージンをCSSで空けるために li{ margin-top:0.5em; } と <style>-</style> に書きました。 ふつうの箇条書き: <ul> <li>AAAAA</li> <li>BBBBB</li> </ul> では、項目間にマージンができてくれたのですが、 画像を先頭にした箇条書きでは、だめでした。 たとえば、 <ul imagesrc="botan.gif"> <li>AAAAA</li> <li>BBBBB</li> </ul> とすると、項目間のマージンがゼロです。 なぜでしょうか?良い方法はないでしょうか?

    • ベストアンサー
    • CSS
  • 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

専門家に質問してみよう