-1

这是应该发生的： 在此处输入图像描述

这是正在发生的事情： 在此处输入图像描述

CSS

p {
        background: #efefef;
        background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);  
        background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
        background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
        box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
        padding: 5px 20px;
        border-radius: 10px;  
        list-style: none;
        position: relative;
        display: inline-table;
        color: #010101;
        text-align:center;
        margin-left: 20%;
        margin-right: 20%;
        z-index: -1;
}

HTML

<p>
        <ul>   
                <li><a href="03.html">Spain 2003</a></li>
                <li><a href="04.html">Costa Rica 2004</a></li>
                <li><a href="05.html">Spain & Portugal 2005</a></li>
                <li><a href="06.html">Spain, France, & Italy 2006</a></li>
                <li><a href="07.html">Peru 2007</a></li>
                <li><a href="08.html">Edinburgh, London, Paris, & Barcelona 2008</a></li>
                <li><a href="09.html">Costa Rica 2009</a></li>
                <li><a href="10.html">Australia, New Zealand, Hawaii, & Fiji 2010</a></li>
                <li><a href="11.html">Spain & Morocco 2011</a></li>
                <li><a href="12.html">Rome & Greece 2012</a></li>
                <li><a href="13.html">Costa Rica 2013</a></li>
        </ul>
</p>
4

1 回答 1

1

那么第一张图片就是你的答案！:/ 你为什么不告诉我们你是怎么写的？

这只是 CSS 错误，您只是在创建psd并尝试将其转换为HTML? 那不会发生的。

当我将它放在列表中时，p css 不起作用

您不应添加p到列表 ( li)。这是一个给你的例子在此处输入图像描述

您不能将其添加p到liHTML 中的非法内容中。

然而，唯一的问题是 UI 中的混乱！

第一个图像显示某种幻灯片查看器，但第二个图像显示一个列表。好吧，在我看来，它实际上是有效的。你是说你刚刚把这个项目放在一个列表中然后它显示一个列表，那里缺少什么？这就是列表的显示方式！

如果您想在列表中显示图像，请尝试在列表中添加图像:) 并且只需添加一些 CSS 代码，就可以了！

祝你好运，加油！

尝试提供一些代码：给我们一些示例或您拥有的代码，我们可以修复它！但是我们不能给你意见，这里是题外话。对不起 ：（

添加：

<p>
    <ul>   
            <li><a href="03.html">Spain 2003</a></li>
            <li><a href="04.html">Costa Rica 2004</a></li>
            <li><a href="05.html">Spain & Portugal 2005</a></li>
            <li><a href="06.html">Spain, France, & Italy 2006</a></li>
            <li><a href="07.html">Peru 2007</a></li>
            <li><a href="08.html">Edinburgh, London, Paris, & Barcelona 2008</a></li>
            <li><a href="09.html">Costa Rica 2009</a></li>
            <li><a href="10.html">Australia, New Zealand, Hawaii, & Fiji 2010</a></li>
            <li><a href="11.html">Spain & Morocco 2011</a></li>
            <li><a href="12.html">Rome & Greece 2012</a></li>
            <li><a href="13.html">Costa Rica 2013</a></li>
    </ul>
</p>

好吧，这行得通！:) 你可以在那里看到列表，现在你可以这样做：

ul li {
 display: inline;
}

ul {
 list-style: none;
}

然后在那里添加图像，这样你就会得到像你在那里一样的图像缩略图，

在此列表上方，显示另一张图像，该图像将用作主要图像或您所称的大图像。您将拥有第一张图片中的那个。然后将它们全部绑定在一个 div 中，并设置border widthheight padding` 和其他属性以启动它。

我认为：您拥有的代码正在运行。这是完美的！

于 2013-10-07T21:50:07.363 回答