みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

css、liを「display:inline;」で横に並べたら“上下”に隙間が空いてしまいます。

苦しんでいます。宜しくお力をお貸し下さい。

 以下のように、cssでリストを横に並べたら、liの上下に隙間が出来てしまいます。試しに、全てのmarginとpaddingに0を当てても改善されません。

 よく言われる横方向に出来る隙間は理由が分かっていて、あえて間隔を空けているのですが、上下方向の隙間を無くしたいと思っています。

 IE6では上下の隙間は空きませんでした。Ff2とNN7での問題なので、私の記述がおかしいのだと思うのですが、宜しくご指摘お願い致します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<!--<?xml version="1.0" encoding="Shift_Jis"?>IE対策-->

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<title>test</title>
<style type="text/css">
/* ページ全体 */
* {
margin: 0px;
padding: 0px;}
body {
background-color: powderblue;}
/* ロアナビゲーション */
div#lowernavigation {
width: 700px;
clear: both;
background-color: white;
border-top: solid 1px mediumpurple;}

div#lowernavigation ul {
text-align: center;
background-color: red;}

div#lowernavigation li {
font-size: x-small;
list-style-type: none;
line-height: 0.5em;
display: inline;
margin: 0px 3px;
background-color: orange;}

div#lowernavigation a {
color: mediumpurple;
text-decoration: none;}
</style>
</head>
<body>
<div id="lowernavigation">
<ul>
<li><a href="link1.html" title="link1">link1</a></li>
<li><a href="link2.html" title="link2">link2</a></li>
<li><a href="link3.html" title="link3">link3</a></li>
<li><a href="link4.html" title="link4">link4</a></li>
<li><a href="link5.html" title="link5">link5</a></li>
<li><a href="link6.html" title="link6">link6</a></li>
<li><a href="link7.html" title="link7">link7</a></li>
<li><a href="link8.html" title="link8">link8</a></li>
<li><a href="link9.html" title="link9">link9</a></li>
<li><a href="link10.html" title="link10">link10</a></li>
<li><a href="link11.html" title="link11">link11</a></li>
</ul>
</div>
</body>
</html>

投稿日時 - 2007-12-13 11:45:37

QNo.3594698

すぐに回答ほしいです

質問者が選んだベストアンサー

ulに フォントサイズが設定されていないせいで 改行が 邪魔をしている
のではないでしょうか

div#lowernavigation ul {
font-size: 0.4em;
text-align: center;
background-color: red;}

ではどうでしょう。

投稿日時 - 2007-12-13 12:10:22

お礼

ズバリそれでした!有難う御座いました。

 liに「font-size:x-small;」をかけていたのですが、これをulの方へ当てるようにしたら出来ました!

 言われてみると、font-sizeを変える前には目立った隙間が無かったような気がします。

 そして済みません、ご解答頂いて気が付いたのですが、liに当てていた「line-height: 0.5em;」は、この事象を検証するのにグチャグチャいじった時に消し忘れたものでした。

本当に有難う御座いました!しかも、凄く早いレスでとても助かりました!!

投稿日時 - 2007-12-13 12:32:43

このQ&Aは役に立ちましたか?

3人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問