一行显示3个<li>的CSS怎么写?

html-css065

一行显示3个<li>的CSS怎么写?,第1张

1、利用Dreamweaver新建一个html页面。

2、在body里面输入代码

<ul>

<li>你好</li>

<li>小鱼</li>

<li>小小</li>

</ul>。

3、默认的样式是这样的。

4、编辑li标签的css样式。

5、float:left代表的是元素左对齐。这样li标签就可以横排显示了,list-style:none用来去除li标签前面的小圆点。

列表<ul><li></li></ul>,其中ul是块级元素,li也是块级元素,怎么知道是不是块级元素?

给他们分别加上不同的background,给他们设定一定的width和height你就可以清晰的知道了。

li标签的css样式名称是current其中要说明的就是楼上说的有点小问题,li是dw的默认标签所以不需要调用class,直接设置完css之后li即可生效。不过它控制的是所有的li.如果要控制单个要分开定义css样式,然后再用class或id调用.

<style>

*{ paddding:0 margin:0}

li{ list-style-type:none}

b{font-weight:normalpadding:0 10px} 

p{line-height:30px}

</style>

<ul style="font-size:14px color:#eee">

       <li>

              <b style=" color:#f00 font-size:15px">姓名<b>

              <span style="color:#f00 font-size:15px">奖品</span>    

       </li>

       <li>

           <p>

                <b>姓名</b><span>海盗双人五日游</span>

           </p>

           <p>

                   <b>岛封</b><span>海盗双人五日游</span>

           </p>

        </li>

        

        

        <li>

           <p>

                <b>姓名</b><span>海盗双人五日游</span>

           </p>

           <p>

                   <b>岛封</b><span>海盗双人五日游</span>

           </p>

        </li>

        <li>

           <p>

                <b>姓名</b><span>海盗双人五日游</span>

           </p>

           <p>

                   <b>岛封</b><span>海盗双人五日游</span>

           </p>

        </li>

        <li>

           <p>

                <b>姓名</b><span>海盗双人五日游</span>

           </p>

           <p>

                   <b>岛封</b><span>海盗双人五日游</span>

           </p>

        </li>

        <li>

           <p>

                <b>姓名</b><span>海盗双人五日游</span>

           </p>

           <p>

                   <b>岛封</b><span>海盗双人五日游</span>

           </p>

        </li>

</ul>