问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

ul中li里放两个元素

头像
Yetsing
    611822

    想问：ul中li里放两个元素的话，一般应该用什么呢？再放一个ul，然后里边放两个li吗？

    补充：想实现类似表格的样式，但不想用表格，如下：

        <ul>
        <li>
            <ul>
                <li>第一行第一列</li>
                <li>第一行第二列</li>
            </ul>
        </li>
        
        <li>
            <ul>
                <li>第二行第一列</li>
                <li>第二行第二列</li>
            </ul>
        </li>
    </ul>

    总觉得这样似乎麻烦了？有没有简洁的方法？

    html
    阅读 9k
    8 个回答
    得票最新
    头像
    Aiello_Chan
      86011117
      ✓ 已被采纳

      只需要将 li 中的 块元素 变为 行内元素 即可.

      在线查看

      代码：

      <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    .inline{
      display: inline
    }
  </style>
</head>
<body>
<ul>
  <li>
    <div class="inline">第一行第一列</div>
    <div class="inline">第一行第二列</div>
  </li>
  <li>
    <div class="inline">第二行第一列</div>
    <div class="inline">第二行第二列</div>
  </li>
</ul>
</body>
</html>

      效果：

      clipboard.png

      头像
      锦峰将将
        399211

        如果都是一样的，那就循环吧

        头像
        肾导
          1.7k138

          可以直接放你想要放的元素，比如div, span, img等等
          或者
          像你说的放ul，再用li处理。
          甚至
          都可以放自定义元素， li可用性很高的。

          头像
          吴翔
            325

            感觉问题是怕外层的li样式，影响里面的li样式。你可以ol,ul,dl,混用啊。

            头像
            老虎不长牙
              1283

              ul里面只能放li，但是并没有规定li里面可以放什么，所以可以按照你自己的需求来，li就一个普通的块元素。

              头像
              怀旧
                50117

                放什么标签是根据你的内容决定的。
                h5提倡语义化的标签，你的li里面还是一个列表的话，当然还是用ul+li

                头像
                互相学习的鸟
                  1585

                  这个根据楼上说的，放那些都行的，关键自及写效果的时候不混淆就可以了

                  头像
                  瑞0908
                    3181020

                    建议 楼主 用sublime写 装一个emme插件
                    以后 不论是写ui li 还是 table 都很方便
                    效果如下

                    ui>li*5
```直接按TAB键 `<ui>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ui>

    table>(tr>td*3)*2 TAB之后
<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>
                    撰写回答
                    你尚未登录，登录后可以
                    • 和开发者交流问题的细节
                    • 关注并接收问题和回答的更新提醒
                    • 参与内容的编辑和改进，让解决方法与时俱进
                    推荐问题