请问哪里出错了？怎么li设置高宽度不管用？

Question

     <div class="tupian">           <ul>               <li style="float:left";>                   <a href="#">                   <img src="../201506302302382.jpg" />                                   <p>至尊老酒（红）10年陈酿</p>                    </a>               </li>                <li>                   <a href="#">                   <img src="../201506302302382.jpg" />                   <p>至尊老酒（红）10年陈酿</p>                      </a>               </li>           </ul>        </div>.tupian ul{ width:650px; height:500px; margin:0 auto;} .tupian ul li{ width:180px; height:120px; text-decoration:none; list-style-type:none;} .tupian ul li a{ width:227px; height:100px;} .tupian ul li img{ width:200px; height:140px; float:left; border:1px solid #000; text-decoration:none; color:#F00;} .tupian ul li p{ font-size:14px; text-decoration:none;}

Answer 1

1.  <li style="float:left";>  这行代码写错了   <li style="float:left;">

2.  .tupian ul li{ width:180px; height:120px; text-decoration:none; list-style-type:none;}

             text-decoration:none;  是给a标签用的,去除下划线

  3.  .tupian ul li a{ width:227px; height:100px;}

           a是内联元素,想要设置宽高,必须设置display:block;或者display:inline-block;

4.  .tupian ul li img{ width:200px; height:140px; float:left; border:1px solid #000; text-decoration:none; color:#F00;}

            text-decoration:none;  是给a标签用的,去除下划线

            color:#F00；是描述字体的颜色

5.综合 2、3、4的宽度和高度, 我凌乱了,醉的不要不要的

总结:刚接触前端,没有知识基础,推荐按照课程学习

http://www.imooc.com/course/programdetail/pid/32

不懂可以问我

Answer 2

记住一点  display章节中游说明用法   指的是  在行级标签中宽高无效  必须转化才能生效

Answer 3

给li里面加一个override.hidden就能看到li的效果了

Answer 4

我觉得第一步是将其变为块状元素。

1、display:inline-block;

2、display:block;

3、float:left....

4、position:absolute;

其次，之所以没显示，觉得可能是因为width设置的原因，可以尝试去掉设定的高度

Answer 5

img的高度140px，比父级li的高度120px高，你要给img加一个overfloat:hidden。

Answer 6

没有转成块元素吧