显示：内联或 dsplay：内联块没有使我的列表水平

Question

我正在尝试使包含 3 个项目的列表显示为水平而不是垂直。 但是使用 display: inline 或 display: inline 块。没有奏效。 我尝试了 float: left 但这使得页面非常混乱没有工作，并且由于某种原因还扩展了页脚和页眉。这是页面：http://www.ottawaydental.com/patients/

这是我的 CSS：

/*Patients Style*/


/*Trying to line up the 3 .pdfs*/   

ul{
    list-style-type: none;
    margin:0;
    padding:0;
}
.doc-thumb {
    display:inline block;
    text-align:center;
}
div {
    display:inline block;
    width: 960px;
}
.docs {
    text-align:center;
    display:inline block;
}

这是我的 HTML 列表：

<!--Container!-->
<div class="docs">
    <ul>
        <li class="docs">
            <figure class="doc-thumb">
                <a href="http://ottawaydental.com/Documents/Transfer%20Consent Form General.pdf">
                    <img alt="General Consent Form" src="http://www.ottawaydental.com/wp-content/uploads/2014/07/consentgeneral.png">
                </a>
            </figure>
            <h4>
                <a href="http://ottawaydental.com/Documents/Transfer%20Consent Form General.pdf">General Consent Form</a>
            </h4>
            <p>A general consent form for transferring patient records from another dental practice.</p>
        </li>
        <li class="docs">
            <figure class="doc-thumb">
                <a href="http://ottawaydental.com/Documents/Transfer%20Consent Form Pickup&Associates.pdf">
                    <img alt="Pickup & Associates Consent Form" src="http://www.ottawaydental.com/wp-content/uploads/2014/07/consentpickup.png">
                </a>
            </figure>
            <h4>
                <a href="http://ottawaydental.com/Documents/Transfer%20Consent Form Pickup&Associates.pdf">Pickup & Associates Consent Form</a>
            </h4>
            <p>A consent form for transferring patient records from Pickup & Associates.</p>
        </li>

        <li class="docs">
            <figure class="doc-thumb">
                <a href="http://ottawaydental.com/Documents/Medical%20History Form.pdf">
                    <img alt="Medical History Form" src="http://www.ottawaydental.com/wp-content/uploads  /2014/07/medicalhistorylogo.png">
                </a>
            </figure>
            <h4>
                <a href="http://ottawaydental.com/Documents/Medical%20History Form.pdf">Medical History Form</a>
            </h4>
            <p>A form to fill out your medical history prior to your appointment.</p>
        </li>
    </ul>
</div>
<!--Container end!-->

任何关于如何修复列表的提示都将不胜感激。就像我说的我已经在内联和内联块之间切换以及尝试浮动。

Answer 1

正如其他人所说，正确的使用是inline-block，即使如此也不要忘记将div的宽度更改为你的3 li的宽度，以便它可以并排排列。

ul{list-style-type: none;margin:0;padding:0;}
.doc-thumb {display:inline-block;text-align:center;}
div {display:inline-block;width: 1500px;}
.docs {text-align:center;display:inline-block;}

Fiddle..

Answer 2

正确的css属性是display:inline-block;

Answer 3

语法错误。是display:inline-block 不是display:inline block

.doc-thumb {display:inline-block;text-align:center;}
div {display:inline-block;width: 960px;}
.docs {text-align:center;display:inline-block;}