Question

我需要水平创建一个4项目列表，图像和每个图像下的描述文本这是我的代码，但看起来好像不能正常工作，描述文字去左边的图像。注意：span标记只是悬停时显示的工具提示选项。

    <style>
    #menu-outer {
        height: 84px;
        background: url(images/bar-bg.jpg) repeat-x;
    }

    .table {
        display: table;   /* Allow the centering to work */
        margin: 0 auto;
    }

    ul#horizontal-list {
        min-width: 696px;
        list-style: none;
        margin:0;
        padding:0;
        padding-top: 20px;
        -text-align: center;
        }
        ul#horizontal-list li {
            display: inline;
        }
    </style>

    <div id="menu-outer">
      <div class="table">
        <ul id="horizontal-list">
<li>
<a href="/purchase/xxx" class="tooltips"><img class="dock" src="/assets/icons/xxx-original.png" ><span>text</span></a>
<a href="">description</a>
</li>
    <li>
    <a href="/purchase/xxxx" class="tooltips"><img class="dock" src="/assets/icons/xxx-original.png"><span>text</span></a>
<a href="">description</a>
    </li>
    <li>
    <a href="/purchase/xxx" class="tooltips"><img class="dock" src="/assets/icons/xxx-original.png"><span>xxxx</span></a>
<a href="">description</a>

    </li>
    <li>
    <a href="/xxx/xx"><img class="dock" src="/assets/icons/bio.png"><span>xxxx 7.x</span></a>
<a href="">description</a>
    </li>

     </ul>
    </div>
    </div>

Answer 1

为您的锚标记应用display:block。同时对display:inline-block适用li。

   ul#horizontal-list li {
        display: inline-block;
    }
   ul#horizontal-list li a{display:block;}

DEMO

带图像和标签的html水平列表

1 个答案: