Question

您好我正在制作页脚：

<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;
}

但是李元素击倒了前两个下方的最后一个，并且顶部有奇怪的间距。

任何帮助都会很棒！

Answer 1

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;
}

Answer 2

您可以使用此代码

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>

页脚宽度li内联块

2 个答案: