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 元素将最后一个元素击倒在前两个元素之下，并且顶部的奇数间距。

任何帮助都会很棒！

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 回答
0

您可以使用此代码

body {
            margin: 0;
            padding: 0;
        }
        #footer {
            background-color: #666666;
            clear: both;
            width: 100%;
            float: left;
            margin: 0;
            padding: 30px 0;
        }
        #footer ul  {
            width:960px;
            margin: 0 auto;
            padding: 0;
            text-align: left;
        }
        #footer li {
            width: 320px;
            display:inline-block;
            float: left;
        }
<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>

于 2019-09-20T06:53:19.067 回答