0

こんにちは、フッターを作成しています:

<div id="footer">

    <ul>

        <li id="qualifications">

            <h4>Professional qualifications</h4>

            <p>Name<br>
               Chartered Veterinary Physiotherapist<br>
               Chartered Physiotherapist<br>
               BSc HONS MCSP<br>
               Post Grad Dip (vet phys) ACPAT CAT A
            </p>

        </li>

        <li id="logos">

            <h4>head
            </h4>

            <img src="/" />

        </li>

        <li id="contact">

            <h4>Contact and referal</h4>

            <p>Contact</p>

            <p><a id="referal">Referal Form</a></p>

        </li>

     </ul>

</div> <!---footer---->

フッター div を 100% 幅にして、色を付けられるようにします。ul の幅を 960px にし、li 要素をインライン ブロック内の別の要素の隣に並べます。CSS:

#footer {
background-color:#666666;


#footer ul  {
    width:960px;
    margin-left: auto ;
    margin-right: auto ;


}

#footer li {
    width: 320px;
    display:inline-block;
}

しかし、li 要素は最初の 2 つの要素の下にある最後の要素をノックし、上部の奇妙な間隔を空けます。

どんな助けでも素晴らしいでしょう！

4

2 に答える 2

0 
reduce the number lines in professional qualification...
reduce the width of li...
and always use float left to solve the alignment problems


<!--<html>
<head>
 <link rel="stylesheet" href="so.css"/>
</head><body>
<div id="header"></div>
<div id="footer">

    <ul>

        <li id="qualifications">

            <h4>Professional qualifications</h4>

            <p>Name<br>
               Chartered Veterinary Physiotherapist<br>
            </p>

        </li>

        <li id="logos">

            <h4>head
            </h4>

            <img src="/" />

        </li>

        <li id="contact">

            <h4>Contact and referal</h4>

            <p>Contact</p>

            <p><a id="referal">Referal Form</a></p>

        </li>

     </ul>

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



#header{
height:80%;
width:100%;
}

#footer {
background-color:#666666;
width:100%;
height:20%;
}



#footer ul  {
    width:960px;
    margin-left: auto ;
    margin-right: auto ;
height:100%;

}

#footer li {
width: 300px;
display: inline-block;
height: 100%;
float: left;
}
于 2013-05-16T10:24:16.833 に答える