DIV中的<ul><li><h><p>的排列方式 是类似于tr和TD从左到右吗? 如果受限于某个宽度 它们会自动移到下面?

html-css09

DIV中的<ul><li><h><p>的排列方式 是类似于tr和TD从左到右吗? 如果受限于某个宽度 它们会自动移到下面?,第1张

如果没有样式的控制是按HTML本身的默认样式排列的。关于HTML标签的默认样式你可以去查一下相关资料。

你的例子中即使那ID=1的DIV中两个DIV宽度和没有超过ID=1的DIV,如果没有设置浮动的话还是按行排列的,如果设置了浮动但宽度和超过了父级DIV(ID=1的DIV),第二个DIV也会换行下移的。这个跟表格里TD是不一样的,TD是列标签,默认样式是从左往右右排列的

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

<style type="text/css"

ul li { float:left

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

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

改为如下试试:

==========================================

<div id="right_on">

<ul>

<li class="res">新闻快报</li>

<li><a href="index.html" >rwqerqwerqwerqwer</a></li>

<li><a href="index.html">qwerrrrrrrrrrrrrrrr</a></li>

<li><a href="index.html">qwerqwerqwerqwer</a></li>

<li><a href="index.html">qwerqwerqwerqwer</a></li>

<li><a href="index.html">qwerqwerrr3fvsw</a></li>

</ul>

</div>

CSS:

#right_on {

float: right

height: 180px

width: 240px

border: 1px solid #E3E3E3

}

#right_on ul li {

height: 20px

display: block

padding: 0px

margin-top:5px

list-style:none

background-image: url(../img/res_link_bg.gif)

background-repeat: repeat-x

background-position: top

border-top-style: none

border-right-style: none

border-bottom-style: none

border-left-style: none

}

#right_on ul li a {

font-family: "宋体"

font-size: 14px

line-height: 20px

font-weight: normal

color: #009999

text-decoration: none

list-style-type:none

background-image: url(../img/arrow.gif)

height: 20px

background-repeat: no-repeat

background-position: left 5px

text-align: left

}

#right_on li.res {

font-family: "宋体"

font-size: 16px

font-weight: bold

line-height: 35px

height: 35px

background-image: url(../img/responsible_bg.gif)

text-decoration: none

margin-top: 5px

display: block

}