掲示板/HTML質問板/過去ログ/一覧/ liタグの行間・マージン

0 名前： saru ： 2006/08/08（火） 22:14 ID:8YJdVbsQ: 初めまして、ひとつ質問させてください。
下記のソースでliタグの部分の行間が他よりも開いてしまい、かつ位置も右寄りになってしまうのではなぜでしょうか？
line-heightを指定すれば他とにたような行間になるのですがデフォルトでこのように表示が開いてしまうのはなぜでしょうか？
よろしくお願いします。

<?xml version="1.0" encoding="shift_jis"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>.temp</title>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<style type="text/css">
A:link{color:#696696}
.block1 {
height: 50px;
float: left;
margin-left: 40px;
}
.block2 {
height: 50px;
float: left;
margin-left: 40px;
}
.block3 {
background-color: white;
height: 50px;
float: left;
margin-left: 40px;
}

.text{
color:grey;
font-size:7pt;
vertical-align:top;
}

ul{

}

body {
margin: 0;
padding: 0;
}
.main {
width: 750px;
position: absolute;
left: 50%;
margin-left: -385px;
}

.header {
height: 100px;
}
.menu {
position: absolute;
left:0;
width: 150px;
height: 300px;
}
.frame {
margin-left: 150px;
width: auto;
height: 300px;
overflow: auto;
}
.footer {
height: 20px;
}
p {
margin: 0 0 5px 0;
}
.menulist {
list-style-type: none;
margin: 0;
padding:0;
}
-->
</style>
</head>

<body>
<div class="main">
<div class="header">
<div class="block1"><span class="text">contact<br />
<a href="mailto:@gmail.com">@gmail.com</a></span>
</div>
<div class="block2">
<span class="text">©2006 temp<br />
all rights reserved.</span>
</div>
<div class="block3">
<span class="text"><b>news</b><br />
<ul>
<li>temp01</li><br />
<li>temp02</li></span>
</ul>
</div>
</div>
<div class="menu">
<ul class="menulist">
<li><span class="text"><a href="mailto:@gmail.com">temp</a></span></li>
<li><span class="text"><a href="">temp</a></span></li>
<li><span class="text"><a href="">temp</a></span></li>
<li><span class="text"><a href="">temp</a></span></li>
</ul>
</div>
<div class="frame">
</div>
<div class="footer">
</div>
</div>
</body>
</html>

1 名前： pirate ： 2006/08/08（火） 22:14 ID:ZPLL9zov: li要素の間隔が他より開くのは、liとliの間にbrがあるからで、右寄りになるのはfloat:leftを指定してるからです。
以下、他に気になった点を羅列しときます。

xhtmlの場合コメントは全て無視されるので、この書き方だとstyle要素の内容も無視される可能性があります。cssは外部ファイルにした方がいいかと。
htmlだとしてもstyleタグの後ろに<!--が抜けてます。
それを付けたとしても途中にコメントがあるので、そこまでがコメントとして扱われると思います。コメント内にコメントは書けません。
cssのコメントは /*コメント*/ です。

.block1等にfloatを指定してますが、floatを指定した要素にはwidthの指定も必須です。

.mainのpositionの指定の仕方が不可解です。mainをセンタリングさせたいんでしょうか？
だとすれば、mainに対して
margin-left:auto;
margin-right:auto;
です。

<div class="block3"> の部分が完全な入れ子になっていません。
【例】
× <div><span></div></span>
○ <div><span></span></div>

あとspan要素の中にul要素入れる事はできないし、ul要素の直下にbr要素を書く事もできません。

2 名前： saru ： 2006/08/08（火） 22:14 ID:.pDEeglC: pirateさん
たくさんのご指摘ありがとうございます。
今回初めてhtmlを書いてみたのでいろいろと不備があったようでした。
リストの行間はブランクがはいっていたのもそうなのですが、それ以外にもいろいろと入れ子がずれていておかしくなっていたみたいです。リストにすると行間が決まってしまうのかと勘違いしていました。
一応下記の通り直してみました。ありがとうございました。

<link rel="stylesheet" href="css/base.css" type="text/css" />



</head>

<body>
<div class="main">


<div class="header">

<div class="block">
<span class="txt">
contact<br />
<a href="mailto:@gmail.com">@gmail.com</a>
</span>
</div>

<div class="block">
<span class="txt">
©2006 temp<br />
all rights reserved.
</span>
</div>

<div class="block">
<span class="txt_list">
<b>news</b><br />
<ul>
<li><a href = "">temp01</a></li>
<li><a href = "">temp02</a></li>
</ul>
</span>
</div>

</div>



<div class="menu">

<span class="txt_list">
<ul>
<li><a href="">temp</a></li>
<li><a href="">temp</a></li>
<li><a href="">temp</a></li>
<li><a href="">temp</a></li>
</ul></span>

</div>



<div class="frame">

<span class="txt">temp<hr />
</span>

</div>



<div class="footer">

<span class="txt">
temp<hr />
</span>
<img src="images/valid-xhtml10.png" height = "18" width = "50" alt = "xhtml1.0" />

</div>


</div>
</body>
</html>