html - 无序列表分崩离析 html

Question

我为此苦苦挣扎了 2 个多小时，我不知道解决方案...

我正在尝试创建一个嵌套列表，每一行都包含以下元素:

水果图片|条形图 |一些值(value)观

水果图片|条形图 |一些值(value)观

这是我的代码:

http://jsfiddle.net/Rq5AJ/

这是我得到的结果:

水果图片|条形图 |一些值(value)观

                            picture of a fruit 

|条形图 |一些值

我希望有人能帮我解决这个问题。提前致谢!

编辑:

删除字体似乎有所帮助，知道为什么吗？

.mgValue{
    text-align:center;
    margin-left: 10px;
    font-size:18px;
    color:#7D7D60;
    margin-top: 50px;
    font-family:'GOTHICB';
}

.gValue{
    color:#A09F8E;
    font-size:14px;
}

@font-face{
    font-family: 'GOTHICB';
    src:url(../Fonts/GOTHICB.TTF);
}

Answer 1

您的格式不正确。每个 ul 元素都应该是一个 li 元素。然后，您可以继续使用 CSS 格式化每个 li 元素内的数据。但是，由于您的 li 元素不是相似的元素，而是不同类型的数据，因此以这种方式格式化会更有意义。

或者，只需将每组元素包装在一个带有“水果(或其他)”类的 div 中，然后为 div 内的元素设置样式。