人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

.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")
}
という形でつくっているのですが、↓のように左に余白ができてしまいます。

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

できれば、

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

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

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

●質問者: rosacanina
●カテゴリ:インターネット ウェブ制作
✍キーワード:border GIF margin padding T-STYLE
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● うぃんど
●27ポイント

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

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

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

◎質問者からの返答

ありがとうございます。

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


2 ● rouge_2008
●27ポイント

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の記述をなるべく詳しく教えてください。

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


3 ● yamaneroom
●30ポイント ベストアンサー

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ