0

我正在尝试创建一个直接位于图像下方的文本列表。图像是通过 CMS 加载的，可以是任意大小。所以我想不出一种使用固定尺寸的方法。

这有意义吗？

这是我的代码：
目前它们（列表项）与放置 ul 的 div 的最左侧对齐。

css 

.maincontent h5 {
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size:14px;
    font-weight:600;
    text-decoration:none;
    text-indent:2px;
    text-align:left;
    line-height:0px;
}
.maincontent img {
    max-width:900px;
    text-align:center;
    display: block; 
margin-left: auto; 
margin-right: auto;
}
.maincontent a {
    text-decoration:none;
}
.maincontent a:hover {
}
.maincontent ul {
    display:block;
    list-style-type:none;
    list-style:none;
    z-index:5;
    padding:0px;
}

.maincontent ul li {
    display:block;
    text-align:left;
    list-style-type:none;
    list-style:none;
}

html 

 <div style="display:block; margin-left:auto; margin-right:auto;"><ul>

    <li>
    <img src="/americanmedium1/files/9913/3401/0984/AM-LOGO.jpg" width="300" height="111"    alt="" />
    </li>

    <li><h5>testes</h5></li>

    <li><h5>setsete</h5></li>

    <li><h5>setes</h5></li>

    <li><h5>estes</h5></li>

    <li><h5>estes</h5></li>

    <li><h5>setes</h5></li>

</ul></div>
4

1 回答 1

1

您的问题是您将 UL 设置为将display: block;其推至其所在容器的 100% 宽度。如果它所在的容器比图像宽，则列表将显示为关闭。我试图用你的代码来模拟一些东西，但很明显我们缺少一些 HTML。尝试设置 UL 宽度，或将其设置为 'inline-block'

于 2012-04-12T15:12:24.703 回答