Question

我希望有人可以帮助我。我使用标签为我的网站创建了一个表格，因为使用<table>创建它的“旧学校”方式无法在移动网站上运行 - 所有内容都在右侧被切断，没有选项滑过来。

我的代码是：

<style>
.list_item1 {
    display: inline-block;
    margin: 5px;
    padding: 1px;
    width: 200px;
}
.list_item2 {
    display: inline-block;
    margin: 5px;
    padding: 1px;
    width: 600px;
}
#wraplist {
    width:800px;
    column-count:2;
    column-gap:10px;
    -moz-column-count:2;
    -moz-column-gap:20px;
    -webkit-column-count:2;
    -webkit-column-gap:20px;
}

</style>

使用以下HTML：

<div id="wraplist">
<div class="list_item1"><li>A</li></div>
<div class="list_item1"><li>B</li></div>
<div class="list_item1"><li>C</li></div>
<div class="list_item1"><li>D</li></div>
<div class="list_item1"><li>E</li></div>
<div class="list_item2"><li>F</li></div>
<div class="list_item2"><li>G</li></div>
<div class="list_item2"><li>H</li></div>
<div class="list_item2"><li>I</li></div>
<div class="list_item2"><li>J</li></div>
</div>
<div style='clear:both;'>&nbsp;</div>

如果您想知道我为什么使用Div而不是通过CSS控制的<ul>，那是因为无论出于何种原因，它都不起作用。我已经在我的网站中复制并粘贴了其他被证明有效的代码，它只显示为一个列表而不是列表分为两列。 div创建了两个列表，但它们不会显示在移动网站上。结果是“list_item1”显示，然后一行 - 第一行，“list_item2”显示非常大的字体，其他一切都消失了。

我创建了两个'列表项'，因为我需要更大的列来为第二行中的额外文本腾出空间。我不能让它们的大小相等。

有没有人对如何解决此问题有任何想法，以便它显示在移动设备上？或者另一种方法呢？

Div表未显示在移动网站上

0 个答案: