CSSテクニックコミュの【質問】レイアウト位置の調整について

コミュニティの皆様。
いつも拝見し勉強させていただいております。

今作成しているページでどうしてもうまくいかない箇所がありますので、質問させてください。

このグローバルナビゲーションとして当てている所が
cssで組むと、左にスペースができてしまいます。
（図の赤い線の隙間部分）

横幅740pxにはまるようにレイアウトしたいと思います。
ぜひともご教示いただきますよう
よろしくお願いいたします。

以下当該箇所ソース----------------------


<ul class="g_ul">
<li class="g_li">
画像部分</li>
<li class="g_li_2">画像部分</li>
<li class="g_li_2">画像部分</li>
<li class="g_li_2">画像部分</li>
<li class="g_li_2">画像部分</li>
<li class="g_li_2">画像部分</li>
<li class="g_li_2">画像部分</li>
<li class="g_li_2">画像部分</li>
<li class="g_li_3">画像部分</li>
</ul>


ここまで----------------------------------

当該箇所CSS-------------------------------
.g_ul{ width:740px;
float:left;
clear:both;
}

.g_li{ float:left;
margin-bottom:10px;
margin-left:0px;
display:inline;
}

.g_li_2{ margin-bottom:10px;
width:100px;
margin-left:0px;
margin-right:0px;
margin-top:0px;
float:left;
display:inline;
}

.g_li_3{ margin-bottom:10px;
width:20px;
margin-left:0px;
margin-right:0px;
margin-top:0px;
float:left;
display:inline;
}
ここまで----------------------------------

ドキュメント------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
------------------------------------------

コメント(4)

最初
全て
最新の40件

[1] mixiユーザー 11月28日 23:17

.g_ul{ width:740px;
float:left; ←消す
clear:both;
margin:0px;　←書く
padding:0px;　←書く
}

あとinlineの指定おかしい

[2] mixiユーザー 11月28日 23:30

.g_ul{ width:740px;
float:left;
clear:both;
margin-left:0;
padding-left:0;
}
でいかがでしょうか？
両方指定しているのはIE6、7・Firefox
クロスプラウザ対応のためです。

取り急ぎ左寄せになりましたが、多分他にも方法はあるかとは思いますが。

[3] mixiユーザー 11月28日 23:35

＞超不死身さま

記述いただいたとおりに書きましたら
あっという間に解決できました。
早急なご回答ありがとうございました。

また、inlineの指定については、勉強します。
ありがとうございました。

[4] mixiユーザー 11月28日 23:39

＞かずさま

問題なく、イメージどおりに仕上がりました。
ご回答ありがとうございました。
とても勉強になりました。

ログインすると、みんなのコメントがもっと見れるよ