页脚宽度inline-block

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元素的内联代码块中的li元素紧挨着另一个。 CSS：

#footer {
background-color:#666666;


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


}

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

但是li元素将最后一个敲到前两个下面，而ther的奇数间距放在顶部。

任何帮助都会很棒！

Answer 1

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>