スタイルシートでの質問です。


.des
{
padding:5px;
margin-left:5px;
border-left: 1px dotted #FF6FCF;
border-right: 1px dotted #FF6FCF;
border-bottom: 1px dotted #FF6FCF;
}

という枠の中に、リストをつくっています。
リストは、
.li
{
list-style-image: url("img/bot_1.gif")
}
という形でつくっているのですが、↓のように左に余白ができてしまいます。

タイトル
  ・あああ
  ・いいい
※「・」は画像

できれば、

タイトル
・あああ
・いいい

という形で、左に余白を作りたくないのですが、どうしたらいいでしょうか。

教えてください、よろしくお願いいたします。

回答の条件
  • URL必須
  • 1人2回まで
  • 13歳以上
  • 登録:2010/07/19 22:46:43
  • 終了:2010/07/20 20:49:14

ベストアンサー

id:yamaneroom No.3

yamaneroom回答回数1040ベストアンサー獲得回数612010/07/20 08:57:59

ポイント30pt

CSSを下記のようにすればよい。

ul{
    padding:0px;
    margin:0px;
}
li{
    margin:0px;
    list-style-type:none;
    list-style-position:outside;
}

http://folio.daa.jp/01/168/rn_tut01.html

その他の回答(2件)

id:windofjuly No.1

うぃんど回答回数2625ベストアンサー獲得回数11492010/07/19 23:43:45

ポイント27pt

対象ブラウザによって変わってきます

まとめておられるページがあったので参照してみてください

http://coliss.com/articles/build-websites/operation/css/866.html

id:rosacanina

ありがとうございます。

リストが画像の場合、どうしてもうまくいきません…

2010/07/20 01:02:53
id:rouge_2008 No.2

rouge_2008回答回数594ベストアンサー獲得回数3512010/07/20 01:57:49

ポイント27pt

CSSの先頭に次の記述を追加してスタイルを初期化してみてください。

ul, li{
margin: 0;
padding: 0;
}

※番号付きリストなら以下

ol, li{
margin: 0;
padding: 0;
}

http://archiva.jp/web/html-css/base_css.html

http://coliss.com/articles/build-websites/operation/css/439.html

参考ページのように、他にも指定する必要が出てくるかもしれません。


※上記の対策で上手くいかない場合は、HTMLやCSSの記述をなるべく詳しく教えてください。

コメント欄を開けてくださった方がやり取りし易いです。

id:yamaneroom No.3

yamaneroom回答回数1040ベストアンサー獲得回数612010/07/20 08:57:59ここでベストアンサー

ポイント30pt

CSSを下記のようにすればよい。

ul{
    padding:0px;
    margin:0px;
}
li{
    margin:0px;
    list-style-type:none;
    list-style-position:outside;
}

http://folio.daa.jp/01/168/rn_tut01.html

  • id:rouge_2008
    ハイクからidコールで補足してありますが、回答だけでは不十分ですので、コメントさせていただきます。
    http://h.hatena.ne.jp/rouge_2008/9259271004255729598

    まとめると次のようになります。

    ul, li{
    margin: 0;
    padding: 0;
    }

    .li{ /* リストの項目にクラス名「.li」を割り当てている場合です。※要素「li」に指定しても大丈夫です。*/
    list-style-position: inside;
    }

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません