5

HTML/CSS の問題であなたの助けが必要です: 5 つの "li" を含む "ul" で構成されたナビゲーション バーがある非常に単純な Web ページを作成しています。「ul」は幅 900px で、「div」内にあります。各「li」は 900/5 = 180px 幅です。それにもかかわらず、それらの要素は新しいラインを作成します。

これは私が期待するものです（多かれ少なかれ）： ここに画像の説明を入力

これは私が得るものです： ここに画像の説明を入力

これはHTMLです:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>My First Website</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/princstyle.css">
</head>

<body>
<div id="container">
    <div id="fascia">
        <h1>My First Website</h1>
    </div>
    <hr class="menu">
    <div id="nav">
        <ul>
            <li><a href="img/a.jpg">About</a></li>
            <li><a href="img/b.jpg">Photo</a></li>
            <li><a href="img/c.jpg">News</a></li>
            <li><a href="img/d.jpg">Video</a></li>
            <li><a href="img/e.jpg">Contacts</a></li>
        </ul>
    </div>
    <hr class="menu">
</div>

</body>
</html>

これは私の最初の CSS ファイル(リセットされた標準 CSS ファイル) です。

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

これは私の実際のCSSファイルです:

@charset "utf-8";
/* CSS Document */


body 
{
    background-color:#363636;
    background-image:url(../img/noise.png);
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}
#container
{
    position:relative;
    width:1000px;
    height:700px;
    margin:0 auto;
}

#fascia
{
    width:950px;
    padding:25px;
    font-size:4em;
    position:relative;

}

html
{
    height:100%;
}

h1,h2,h3,h4,h5,h6,p{
    color:#FFF;
    font-family:Arial,Helvetica,sans-serif;
    text-align:center;
}

hr.menu
{
    margin:0;
}

#nav
{
    width:100%;
    position:relative;
}

#nav ul 
{
    width:900px;
    margin:0 auto;
}

#nav ul li
{
    display:inline-block;
}


#nav ul li a
{
    display:block;
    width:180px;
    font-weight:bold;
    color:#FFF;
    text-transform:uppercase;
    text-align:center;
    text-decoration:none;
    padding:5px 0;
}


#nav ul li a:hover
{
    background-color:#C09;
}

このメッセージが長くなって申し訳ありません。回答ありがとうございます。

編集:ここにjsFiddleがあります

4

4 に答える 4

8

インラインで配置される要素は、HTML内の構造に影響されます。'sの間の空白をコメント化する<li>か、手動で空白を削除すると、メニューは期待どおりに整列します。

もう1つの方法は、を0に設定font-sizeしてから、 's<ul>に必要なフォントサイズを再宣言することです。これは、この人気のある問題とそれを解決するための追加の方法について説明している有益な記事です。<li>

于 2013-03-12T17:57:33.040 に答える
6

float:leftの代わりに使用display:inline-block.

#nav ul li
{
    display:inline-block;   <-- here
}
于 2013-03-12T17:57:24.787 に答える
2

他の人が提案したようにフロートを操作するのではなく（後でクリアする必要があるため、かなり面倒です）、次のようにメニュー項目間の空白を削除することもできます。

<div id="nav">
    <ul>
        <li><a href="img/a.jpg">About</a></li><li><a href="img/b.jpg">Photo</a></li><li><a href="img/c.jpg">News</a></li><li><a href="img/d.jpg">Video</a></li><li><a href="img/e.jpg">Contacts</a></li>
    </ul>
</div>

JSFiddle: http://jsfiddle.net/QNb2j/1/

于 2013-03-12T18:07:26.910 に答える
2

の各ナビゲーション項目に希望の幅を設定してから、<li>に設定<a>しますwidth:100%;。また、nav リストで display inline-block を使用する場合は空白を忘れないでください。HTML に余分なスペースがあると、インライン ブロック要素の周囲に数ピクセルの余分なスペースが追加される可能性があります。

于 2013-03-12T18:03:11.513 に答える