鱼C论坛

 找回密码
 立即注册
查看: 225|回复: 5

[已解决]为毛会这样子? why?

[复制链接]
最佳答案
3 
发表于 2018-6-9 22:29:48 | 显示全部楼层 |阅读模式

马上注册加入鱼C,享用更多服务吧^_^

您需要 登录 才可以下载或查看,没有帐号?立即注册

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

代码是这样:
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <meta charset="utf-8">
  5.         <title>30-序列</title>
  6.         <style type="text/css">
  7.             ul{
  8.                                 margin:0;
  9.                                 padding:0;       
  10.                          }  
  11.                         li{
  12.                                 list-style:none;
  13.                                 margin: 6px 0;
  14.                                 text-indent:50px;
  15.                                 float:left;
  16.                                 padding:15px;
  17.                                 <!--box-sizing:border-box;-->
  18.                 <!--width: 233px;
  19.                 margin-right:33px;-->
  20.                                 margin-right:14%;
  21.                                 width:22%;
  22.        
  23.                         }
  24.                        
  25.                         li:first-child{background:#C0392B url(check.png) no-repeat 10px 50%;}
  26.                         li:nth-child(2){
  27.                         background: #E74C3C url(shenshou.png) no-repeat 10px 50%;
  28.                 }
  29.             li:nth-child(3){
  30.                         background: #C0392B url(check.png) no-repeat 10px 50%;
  31.                 }
  32.             li:last-child{
  33.                         background: #E74C3C url(shenshou.png) no-repeat 10px 50%;
  34.                                                 margin-right: 0;
  35.                 }
  36.                         li:hover{background-color:#29ff00;}
  37.                        

  38.         </style>
  39. </head>
  40. <body>
  41.         <ul>
  42.                
  43.                         <li>小天才养殖场</li>
  44.                         <li>吹水阁</li>
  45.                         <li>Web开发</li>
  46.                         <li>QT开发</li>

  47.         </ul>
  48. </body>
  49. </html>
复制代码

效果如下:不太美观,所以我想把高度调一下加了一句代码padding:15px;

加padding:15px;之前

加padding:15px;之前

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

加padding:15px;之后,为什么会这样子?

加padding:15px;之后,为什么会这样子?

为什么自动换行了呢?我明明用的百分比来调整对列项的大小的啊!为什么没起作用了呢?
最佳答案
2018-6-10 11:14:41
本帖最后由 不二如是 于 2018-6-11 15:03 编辑

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

但是又设置了内边距15px(上下左右都生效)后,ul整体宽度超过浏览器,所以多余元素被“挤”到下一行了
最佳答案
3 
 楼主| 发表于 2018-6-9 22:39:36 | 显示全部楼层
本帖最后由 隨鈊乄鎍慾 于 2018-6-10 07:08 编辑

求大神显身吧!显显灵吧!
最佳答案
199 
发表于 2018-6-10 11:14:41 | 显示全部楼层    本楼为最佳答案   
本帖最后由 不二如是 于 2018-6-11 15:03 编辑

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

但是又设置了内边距15px(上下左右都生效)后,ul整体宽度超过浏览器,所以多余元素被“挤”到下一行了
最佳答案
3 
 楼主| 发表于 2018-6-10 21:15:42 | 显示全部楼层
不二如是 发表于 2018-6-10 11:14
设置为相对宽度22%后,四个框框,在一行显示。

但是又设置了内边距22px(上下左右都生效)后,ul整体 ...

弱弱的问一句我没有设置内边距为22px,求指点!感谢!
最佳答案
199 
发表于 2018-6-10 21:50:31 From FishC Mobile | 显示全部楼层
SdWaj  2018-6-10 21:15
22px,л

д15px
最佳答案
3 
 楼主| 发表于 2018-6-11 17:44:53 | 显示全部楼层
本帖最后由 隨鈊乄鎍慾 于 2018-6-11 18:05 编辑


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

改完之后

改完之后

这样子好看多了
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

小甲鱼强烈推荐上一条 /1 下一条

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号

GMT+8, 2018-8-22 08:26

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表