ここから本文です

Webページを作成しています。

nya********さん

2012/11/814:13:00

Webページを作成しています。

htmlでセルの中に箇条書きリストを入れ込むと、セルから箇条書きの「・」がはみ出てしまいます。
ソースコードは以下のとおりシンプルなものです。

<tr>
<td>
<ul>
<li>あいうえお</li>
<li>かきくけこ</li>
<li>さしすせそ</li>
</ul>
</td>
</tr>

CSS上でmarginやpadiingなどの設定が必要でしょうか?
色々試しましたが解決しませんので、どなたかご教授をお願いします。

補足皆さん、ご回答いただきありがとうございます!
とりあえずCSSのソースを貼りますので解析できましたらお願いします(>_<)

* {margin:0;padding:0;}

body { background-color:#61b969;margin: 0;padding: 0;font-size: 0.8em;
font-family: "メイリオ", "ヒラギノ角ゴ Pro W3", "MS Pゴシック";}

#wrapper{width: 760px;margin: 0 auto;background-color: #FFF;}

#header {width: 700px;height: 166px;margin: 0 auto;}

#menu {
margin-top: 10px;
margin-left: 30px;
margin-bottom: 20px;
float: left;
width: 150px;
}

#contents {float: left;width: 550px;}

#footer {margin-top: 20px;clear: both;width: 700px;margin: 0 auto;}

table.table001 {
border-collapse: collapse;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
white-space: normal;
}

h2 {
margin: 0;
padding-left: 10px;
padding-bottom: 0px;
background-color: #009900;
font-size: 1.1em;
height: 25px;
line-height:25px;
}

tr.menuarea{
margin-top: 30px;
width: 100px;
height: 50px;
background-color: #B1E1A6;
}

tr.menuarea td{
vertical-align: middle;
}

閲覧数:
470
回答数:
3
お礼:
100枚

違反報告

ベストアンサーに選ばれた回答

hei********さん

編集あり2012/11/1001:40:30

shimix703さんの回答通りです。

ブラウザはデフォルト(初期値)として、UL要素に margin と padding が設定されています。(値はブラウザによって異なる)

それを * {margin:0;padding:0;} で、UL の値を 0 にしているのが原因ですね。

--------------------------------------

その不具合を確認したブラウザはなんですか。

コピーで確認できるソースをください。

下のソースで不具合が発生しますか。

<!DOCTYPE html>
<html lang="ja">
<head>
<title></title>
<style type="text/css">
td { border:solid 1px #ccc;}
</style>
</head>
<body>
<table>
<tr>
<td>
<ul>
<li>あいうえお</li>
<li>かきくけこ</li>
<li>さしすせそ</li>
</ul>
</td>
</tr>
</table>
</body>
</html>

質問した人からのコメント

2012/11/10 23:55:04

降参 ULにmargin-leftを指定することで解決しました。
次回から箇条書きにする場合は、ご回答にもあったように画像で指定したいと思います。
BAをどなたにするか迷いましたが、一番最初に答えてくださり、親切にサンプルまで書いてくださったheiltoreasonさんにさせていただきました。
皆さん本当にありがとうございました。

ベストアンサー以外の回答

1〜2件/2件中

並び替え:回答日時の
新しい順
|古い順

dob********さん

編集あり2012/11/818:20:54

追記

とりあえずcssを貼るとか言う前に
すでに回答してくれている方の問いかけに対して補足したほうがいいと思いますよ。

このHTMLはちゃんと標準準拠モードで記述されてますか?
-------------------------

>>nyanparari27さん
実戦的な話をすると
色々なブラウザで簡単に位置を揃える為には
デフォルトのリストマークを使わずに
「・」を画像で用意してliの背景画像として指定すると楽ですよ
その際、liの左marginとpadding、background-positionで位置調整します

_例
li{
list-style:none;
background:url(dot.gif) no-repeat 0 5px;
margin-left:2em;
}

プロフィール画像

カテゴリマスター

shi********さん

編集あり2012/11/817:21:14

nyanparari27さん

提示されただけのソースで(あと、heiltoreasonさん が提示されたソースでも)確認しましたが、IE8,Firefox,Opera,Chromeのどれでも

>セルから箇条書きの「・」がはみ出てしまいます。

という現象が確認出来ません。

使っているブラウザを教えてください。あるいはどこかで外部CSSなどを読み込んでいたりはしませんか(ユーザーCSSというオチだったらさすがにアレですが・・・)。



何かCSSを書いている気がしてなりませんけど(汗

http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1160880886




(補足があったので追記)
>* {margin:0;padding:0;}

li要素のmarginを削ってしまってますよね・・・。li要素にmargin-leftを設定してください。


ブラウザのデフォルトの設定を削ってしまうならそれに代わる設定を全部書くべきです。それが面倒ならデフォルトの設定を残してください。

この質問につけられたタグ

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる