Question

我试图将3个项目的列表显示为水平而不是垂直。但是使用display：inline或display：inline block。哈斯没有工作。我试过浮动：左边但是这使得页面非常凌乱没有工作，并且由于某种原因也扩展了页脚和页眉。这是页面：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

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

Answer 2

语法错误。它是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;}

Answer 3

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

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 ..

显示：内联vs显示：内联块不使我的列表水平

3 个答案: