css 怎样让无序列表 横着排列

html-css024

css 怎样让无序列表 横着排列,第1张

<!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浮动后脱离文档流了。

html中写：

<ul class="list">

<li tittle="">我是第一个</li>

<li tittle="">我是第二个</li>

<li tittle="">我是第三个</li>

<li tittle="">我是第四个</li>

</ul>

css中定义：

.list{ width:800pxmargin:0 auto}

.list li{ list-style:nonewidth:200pxheight:25pxline-height:25pxfloat:left}

或者直接在页面title下面写

<style type="text/css">

.list{ width:800pxmargin:0 auto}

.list li{ list-style:nonewidth:200pxheight:25pxline-height:25pxfloat:left}

</style>

实现的效果都一样

打字不易，请采纳