【问题标题】:Mobile Friendly Alternative to Tables?移动友好的桌子替代品?
【发布时间】:2014-07-17 11:00:37
【问题描述】:

我正在学习 HTML/CSS,我想将下面列出的网站(目前使用 Windows Excel 制作)重写为我自定义的内容。问题是使用表格有点难以移动友好。我还没有(很快)接触到 Javascript,但是有 CSS 方法来解决这个问题吗?

我要更改的网站:http://libertyresourcedirectory.com/d/home.html

对于这个网站:http://eglove.github.io/ 我只使用@media screen 最大宽度 1024px 和 728px 来提供自动“平板电脑”和“移动”版本。对 LRD 站点执行此操作不会正确分解表。

提前感谢您的任何回答! :)

【问题讨论】:

  • 您可以使用带有display:table的div。
  • 为了响应性,DIV 应该替换你的表结构
  • 另外,请在问题中最后包含您的代码的 sn-ps。链接实际的实时页面效果不佳,因为它们将被更新/删除并且不可用以供以后参考。
  • 感谢 jacelysh,我会确保比较 display:table 和下面的 div 内联解决方案。 :)

标签: html css mobile


【解决方案1】:

你可以这样做:http://jsfiddle.net/sGJW5/1/ HTML

<div class="container">
    <ul>
       <li>
           Computers
        </li>
        <li>
            <a href="">Editing</a>
        </li>
        <li>
            <a href="">Internet/Privacy </a>
        </li>
    </ul>
</div>
<div class="container">
    <ul>
       <li>
           Computers
        </li>
        <li>
            <a href="">Editing</a>
        </li>
        <li>
            <a href="">Internet/Privacy </a>
        </li>
    </ul>
</div>

CSS

.container
{
    display:inline-block;
}

.container ul
{
    list-style:none;
}

.container ul li:first-child
{
    background-color:red;
}

【讨论】:

  • 谢谢你,我会试试这个(现在不能)和 display:table 只是为了玩这些选项。但这是有道理的,我很感激。 :)
猜你喜欢
  • 2011-12-17
  • 2015-05-31
  • 1970-01-01
  • 1970-01-01
  • 2016-11-11
  • 1970-01-01
  • 1970-01-01
  • 2015-04-21
  • 2020-05-22
相关资源
最近更新 更多