如何把两个LI并排成水平，要在CSS里控制

html-css05

如何把两个LI并排成水平，要在CSS里控制,第1张

首先得明白行内元素和块级元素。li 是块级元素，要想使两个LI并排成水平排列，得把块级元素转化为行内元素。帮你写的如下：

<style type="text/css"

ul li { float:left

list-style:none/*去掉li前的点标记*/

margin:5px/*外边距*/}</style<ul<li<a href="#"系部快讯</a</li

<!DOCTYPE html><head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title>无标题文档</title>

</head>

<style>

div ul{

width:610px

overflow:hidden

}

div ul li{

list-style-type:none

}

div ul li.left{

background:blue

float:left

width:200px

height:300px

}

div ul li.right{

background:gray

float:left

width:400px

height:300px

}

</style>

<body>

<div>

<ul>

<li class="left">左边内容</li>

<li class="right">右边内容</li>

</ul>

</div>

</body>

</html>

注意：

1、ul的宽度 要大于等于 所有li相加的宽度，

2、li 需要加 float:left左浮动，如果是向右排列，就加float:right 右浮动

其他的值可以随意设置

ul{list-style:nonewidth:200pxoverflow:hidden}

li{width:100pxfloat:left} <ul>

    <li>1</li>

    <li>6</li>

    <li>2</li>

    <li>7</li>

    <li>3</li>

    <li>8</li>

    <li>4</li>

    <li>9</li>

    <li>5</li>

    <li>10</li>

</ul>

要不然用2个ul设为float也可以