你的例子中即使那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
}