dreamweaver中项目列表默认是竖向的，在CSS中如何用样式把它变成横向的

html-css043

dreamweaver中项目列表默认是竖向的，在CSS中如何用样式把它变成横向的,第1张

两种方法：

一种是左浮动：{float:left}

Float常跟属性值left、right、none

Float:none 不使用浮动

Float:left 靠左浮动

Float:right 靠右浮动

float语法：

float : none | left |right

参数值：

none : 　对象不浮动

left : 　对象浮在左边

right : 　对象浮在右边

<div class="divcss5">

<div class="divcss5_left">布局靠左浮动</div>

<div class="divcss5_right">布局靠右浮动</div>

<div class="clear"></div><!-- html注释：清除float产生浮动 -->

</div>

二种内联样式：{display:inline}。

例子：

<html>

<head>

<style type="text/css">

p {display: inline}

div {display: none}

</style>

</head>

<body>

<p>本例中的样式表把段落元素设置为内联元素。</p>

<p>而 div 元素不会显示出来！</p>

<div>div 元素的内容不会显示出来！</div>

</body>

</html>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        *{margin: 0 padding: 0}

        ul, li{list-style: none}

        ul:after{content: '' display: block clear: both}

        li{width: 100px height: 100px background-color: pink font-size: 20px float: left margin-right: 10px}

    </style>

</head>

<body>

<ul>

    <li>111</li>

    <li>222</li>

    <li>333</li>

</ul>

</body>

</html>

使用浮动float即可，但是使用浮动一定记得将父级ul清除浮动，否则它的高度为空，因为里面的li浮动后脱离文档流了。