隨鈊乄鎍慾 发表于 2018-6-9 22:29:48

为毛会这样子？ why?

本帖最后由 隨鈊乄鎍慾 于 2018-6-10 07:05 编辑

代码是这样：
<!DOCTYPE html>
<html>
<head>
      <meta charset="utf-8">
      <title>30-序列</title>
      <style type="text/css">
            ul{
                                margin:0;
                                padding:0;       
                       }
                        li{
                                list-style:none;
                                margin: 6px 0;
                                text-indent:50px;
                                float:left;
                                padding:15px;
                                <!--box-sizing:border-box;-->
                <!--width: 233px;
                margin-right:33px;-->
                                margin-right:14%;
                                width:22%;
       
                        }
                       
                        li:first-child{background:#C0392B url(check.png) no-repeat 10px 50%;}
                        li:nth-child(2){
                        background: #E74C3C url(shenshou.png) no-repeat 10px 50%;
                }
            li:nth-child(3){
                        background: #C0392B url(check.png) no-repeat 10px 50%;
                }
            li:last-child{
                        background: #E74C3C url(shenshou.png) no-repeat 10px 50%;
                                                margin-right: 0;
                }
                        li:hover{background-color:#29ff00;}
                       

      </style>
</head>
<body>
      <ul>
               
                        <li>小天才养殖场</li>
                        <li>吹水阁</li>
                        <li>Web开发</li>
                        <li>QT开发</li>

      </ul>
</body>
</html>
效果如下：不太美观，所以我想把高度调一下加了一句代码padding:15px;

加了padding:15px;之后就成这个样子了！

为什么自动换行了呢？我明明用的百分比来调整对列项的大小的啊！为什么没起作用了呢？

隨鈊乄鎍慾 发表于 2018-6-9 22:39:36

本帖最后由 隨鈊乄鎍慾 于 2018-6-10 07:08 编辑

求大神显身吧！显显灵吧！{:10_282:}

不二如是 发表于 2018-6-10 11:14:41

本帖最后由 不二如是 于 2018-6-11 15:03 编辑

设置为相对宽度22%后，四个框框，在一行显示。

但是又设置了内边距15px（上下左右都生效）后，ul整体宽度超过浏览器，所以多余元素被“挤”到下一行了

隨鈊乄鎍慾 发表于 2018-6-10 21:15:42

不二如是 发表于 2018-6-10 11:14
设置为相对宽度22%后，四个框框，在一行显示。

但是又设置了内边距22px（上下左右都生效）后，ul整体 ...

弱弱的问一句我没有设置内边距为22px,求指点！感谢！

不二如是 发表于 2018-6-10 21:50:31

SdWaj2018-6-10 21:15
22px,л

д15px

隨鈊乄鎍慾 发表于 2018-6-11 17:44:53

本帖最后由 隨鈊乄鎍慾 于 2018-6-11 18:05 编辑

不二如是 发表于 2018-6-10 21:50
д15px

嘿嘿！不二大神，我查了一下CSS。这样子改了一下：
padding-top:15px;
padding-bottom:15px;
改完之后：

这样子好看多了{:10_277:}
页: [1]
查看完整版本: 为毛会这样子？ why?