问答博客资讯标签用户活动
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

当 li 里面嵌套div的时候,为什么嵌套的div默认没有和外层的 li一样表现为横排?

头像
未尝
    13131018
    
<div>
<ul class="bucket">
<li> <div> a</div> <div> aa</div></li>
<li> <div>b</div> </li>
</ul>
</div>
      .bucket li{
      display:inline-block;
      // display:inline;
    //  height:32px;
      background-color:#779911
  }

    https://jsfiddle.net/Seven4X/...

    css
    阅读 5k
    7 个回答
    得票最新
    头像
    jqwang521
      763

      因为div是块级元素。可以尝试将div设置display:inline-block

      头像
      Tlean
        374

        角度很刁专，块级元素。。。

        头像
        程序媛花花
          1.7k53856
          <html>

<head>
    <title> </title>
<style type="text/css">
  .bucket li{
      float:left;
      display:inline;
  }
</style>

</head>
<body>

<div>
<ul class="bucket">
<li> <div> a</div> </li>
<li> <div>b</div> </div>
</ul>
</div>
</body>
</html>
          头像
          阿木木
            19621932
              .bucket li div {
      display:inline;
  }

            不明白题主在说什么。

            头像
            偶尔
              9012833

              因为是块级元素，你可以给个左浮动啊

              头像
              未尝
                13131018
                头像
                Mr_zhang
                  39529

                  把 li的样式 display：inline 换 display：inline-block 就好。还有 行内元素我开发过程中很少设置成inline，即使要转换行内也是 display：inline加个block 还能控制宽高，你这个inline就相当把元素变成了span，这种行内元素就别再套子元素了，a标签你可能见过网站套东西的，但a比较特殊，别效仿
                  另外，inline并不等于你说的左浮了，你用float： left这才叫真正的左浮动，也能实现你说的效果

                  撰写回答
                  你尚未登录，登录后可以
                  • 和开发者交流问题的细节
                  • 关注并接收问题和回答的更新提醒
                  • 参与内容的编辑和改进，让解决方法与时俱进
                  推荐问题